/* =========================================================================== MOBILE-OFFRE.CSS — les deux pages qui vendent, vues sur un téléphone --------------------------------------------------------------------------- CONCERNE UNIQUEMENT : pages/formules.html et pages/methode.html. Chargée APRÈS assets/css/telephone.css, qui n'est pas modifié. POURQUOI CE FICHIER Le téléphone n'est plus le format dégradé, c'est le format principal. Mesuré à 390 px de large, avant correction : · les trois cartes de prix ............ 2 915 px (3,5 écrans) · la page Formules en entier .......... 15 704 px · les cinq options .................... 916 px · le bloc « inclus / jamais inclus » ... 1 180 px · la carte Vizion ..................... 1 168 px · les six étapes (Méthode) ............ 1 067 px Sur un téléphone, la carte « Essentiel » à elle seule dépassait la hauteur de l'écran : impossible de comparer trois prix qu'on ne peut pas voir en même temps. Or c'est TOUTE la fonction de la page. LA SOLUTION RETENUE POUR LES CARTES DE PRIX On garde visible ce qui sert à choisir — le nom, le prix, la phrase qui résume, le bouton — et on replie le reste dans un « déroulé » (
/), ouvert d'un seul doigt. Résultat : les trois prix tiennent sur un seul écran. POURQUOI IL Y A QUAND MÊME HUIT LIGNES DE JAVASCRIPT DANS LA PAGE Un
ne peut pas être ouvert par le CSS : c'est un attribut HTML, et aucune règle CSS ne peut le poser. Deux façons de faire : a) l'écrire FERMÉ dans le HTML → il faudrait du JavaScript pour l'ouvrir sur ordinateur, et sans JavaScript le grand écran serait cassé ; b) l'écrire OUVERT dans le HTML → le contenu est visible partout par défaut, et un tout petit script le referme sur les écrans étroits. C'est (b) qui est appliqué : l'état de repos, sans une ligne de script, est l'état VISIBLE. Si le script ne s'exécute pas, le téléphone retrouve simplement l'affichage d'avant — rien n'est jamais caché par accident. RÈGLES RESPECTÉES · rien ne change au-dessus de 700 px de large, sauf deux lignes de structure (§0) qui rendent le déroulé transparent sur grand écran ; · uniquement transform et opacity sont animés ; · toute zone qui se touche fait au moins 44 px ; · aucun nom de classe existant n'est réutilisé : le seul nom nouveau est .op__det, vérifié absent du projet (grep sur assets/ et pages/) ; · aucune dépendance extérieure. LA LARGEUR DE BASCULE 700 px : au-delà, les trois cartes de prix reviennent côte à côte dans la mise en page d'origine (style.css les empile déjà sous 900 px, mais dans une colonne de 520 px centrée qui reste confortable jusque-là). =========================================================================== */ /* =========================================================================== 0. LE DÉROULÉ DES CARTES DE PRIX — structure, à TOUTES les largeurs --------------------------------------------------------------------------- Sur grand écran, la balise
ne doit rien changer du tout. « display:contents » fait disparaître la boîte elle-même : ses enfants (la phrase, la liste, l'encadré « pour qui c'est fait ») redeviennent des enfants directs de la carte, exactement comme avant. Le résumé, lui, ne sert qu'au téléphone : il est caché. Vérifié à 1400 px : mise en page identique au pixel près. =========================================================================== */ .op__det{display:contents} .op__det > summary{display:none} @media (max-width:700px){ /* =========================================================================== 1. LES TROIS CARTES DE PRIX --------------------------------------------------------------------------- Avant : nom, prix géant, sous-titre, phrase, huit puces, encadré, bouton. 985 px par carte. Après : le nom et le prix sur la MÊME ligne, la phrase qui résume dessous, un bouton « le détail » replié, le bouton d'action. =========================================================================== */ /* La colonne de 520 px centrée n'a plus d'objet : on prend toute la largeur utile, et on resserre l'écart entre les cartes. */ .of__grid{grid-template-columns:1fr;max-width:none;gap:10px} .op{ padding:15px 16px 16px; border-radius:20px; } /* L'en-tête devient une ligne : le nom à gauche, le prix à droite. C'est ce qui permet de balayer les trois prix du regard. La réserve de 36 px pour l'étiquette « La plus demandée » n'a plus lieu d'être : les cartes sont empilées, il n'y a plus de prix à aligner horizontalement. */ .op__hd{ display:grid;grid-template-columns:1fr auto; align-items:baseline;column-gap:12px; padding:0;margin-bottom:0;border-bottom:0; } .op__badge{ position:static;grid-column:1 / -1;justify-self:start; height:22px;padding:0 10px;font-size:.66rem;margin-bottom:9px; } .op__k{grid-column:1;font-size:1.1rem} .op__p{grid-column:2;margin:0} .op__p span{font-size:2.05rem} .op__p em{font-size:1.02rem} .op__s{grid-column:1 / -1;margin-top:5px;font-size:.85rem;line-height:1.35} /* --- le déroulé -------------------------------------------------------- La balise redevient une vraie boîte, et son résumé devient le bouton qui l'ouvre. On retire la petite flèche que dessinent les navigateurs (elle n'a pas la même allure sur iPhone et sur Android) et on met à la place le « + » du jeu d'icônes maison, qui pivote en croix à l'ouverture. */ .op__det{display:block;margin-top:13px} .op__det > summary{ display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:46px;padding:0 14px; border:1px solid var(--line);border-radius:13px; background:var(--paper); font-size:.9rem;font-weight:560;color:var(--ink-2); cursor:pointer;list-style:none; -webkit-tap-highlight-color:transparent; } /* Safari et les anciens Chrome dessinent le triangle par cette pseudo-classe ; Firefox par « list-style ». Les deux sont neutralisés. */ .op__det > summary::-webkit-details-marker{display:none} .op__det > summary::marker{content:''} .op__det > summary .ic{ flex:none;font-size:1.15rem;color:var(--ink-3);stroke-width:2.4; transition:transform .3s var(--e-out); } .op__det[open] > summary .ic{transform:rotate(45deg)} .op__det[open] > summary{ margin-bottom:14px; border-color:var(--tint);color:var(--ink); } .op__det[open] > summary .ic{color:var(--tint)} .op__det > summary:focus-visible{ outline:2.5px solid var(--blue);outline-offset:2px; } /* 🔴 FILET DE SÉCURITÉ — LE SEUL « !important » DU FICHIER anim-sections.js écrit « les lignes des formules » une à une, en posant opacity:0 DIRECTEMENT dans le style de chaque
  • . Ce script mesure la page au chargement : à ce moment-là, sur un téléphone, les lignes sont repliées, donc invisibles, donc mesurées à zéro. Il les range dans « déjà à l'écran » et lance leur apparition dans le vide. Mesuré : sur les huit lignes de la carte Essentiel, cinq restaient à opacity:0 une fois le déroulé ouvert. Un style écrit dans l'attribut « style » d'un élément ne peut être annulé que par « !important » : c'est la seule raison de sa présence. Sur téléphone, les lignes ne s'écrivent donc plus une à une — elles sont simplement là quand on ouvre. C'est de toute façon le bon geste : on vient de demander à les voir. Le grand écran, lui, garde l'effet. */ .op__det .op__l li{opacity:1 !important;transform:none !important} /* Le contenu déplié : le même, simplement resserré. */ .op__d{font-size:.93rem;line-height:1.48} .op__l{margin:14px 0 0;gap:10px} .op__l li{font-size:.91rem;line-height:1.4} .op__inc{padding-bottom:9px;margin-bottom:0} .op__plus-t{padding:12px 13px;margin-bottom:0;font-size:.88rem;line-height:1.5} .op__plus-k{margin-bottom:6px} /* Le bouton d'action reste toujours visible, sous le déroulé. */ .op .btn{margin-top:14px;min-height:46px} /* Les cartes ne se soulèvent plus au doigt : sur un écran tactile, un appui long déclenchait le survol et faisait sauter la carte. */ .op:hover{transform:none} /* =========================================================================== 2. LES CINQ OPTIONS --------------------------------------------------------------------------- Avant : 916 px pour cinq encadrés dont le titre, le prix et l'explication étaient sur trois lignes séparées. Le titre et le prix tiennent très bien sur la même ligne, comme sur un menu de restaurant. =========================================================================== */ .of__opts{margin-top:46px;padding-top:30px} .opt__grid{gap:8px;margin-top:18px} .opt{ display:grid;grid-template-columns:1fr auto; column-gap:12px;align-items:baseline; padding:13px 15px; } .opt b{grid-column:1;font-size:.94rem} .opt span{grid-column:2;margin:0;font-size:.94rem;white-space:nowrap} .opt p{grid-column:1 / -1;margin-top:5px;font-size:.83rem;line-height:1.42} .opt:hover{transform:none} .of__note{margin-top:20px;font-size:.84rem;line-height:1.5} /* =========================================================================== 3. LA PAGE « LES MOTS, EN CLAIR » --------------------------------------------------------------------------- Deux encadrés de définition (1 403 px), le tableau, trois exemples (942 px) et l'encadré d'aide (684 px). Rien à replier ici : ce sont des explications qu'on lit une fois. On resserre les marges intérieures et on descend d'un cran la taille du texte courant. =========================================================================== */ .cmp__deux{gap:10px;margin-bottom:44px} .cmp__mot{padding:20px 18px;border-radius:20px} .cmp__def{margin-top:10px;font-size:.94rem;line-height:1.5} .cmp__apres{margin-top:14px;font-size:.89rem;line-height:1.45} .cmp__pile{margin-top:16px} .cmp__pile li{padding:10px 14px;column-gap:11px} .cmp__pile li span{font-size:.82rem} .cmp__menu{margin-top:16px;padding:11px 12px;gap:7px} .cmp__bloc-tab{margin-bottom:44px} .cmp__intro{margin-bottom:18px;font-size:.94rem;line-height:1.5} .cmp__note{margin-top:16px;font-size:.84rem;line-height:1.5} /* Le tableau glisse toujours du doigt (telephone.css l'a déjà resserré pour qu'un morceau de la colonne suivante dépasse et donne envie de glisser). On ajoute seulement le calage : le doigt lâché, la colonne se pose proprement au lieu de rester coupée en deux. */ .cmp__scroll{scroll-snap-type:x proximity} .cmp__tab th[scope="row"]{scroll-snap-align:start} .cmp__th{scroll-snap-align:start} .cmp__cas{gap:10px;margin-top:18px;margin-bottom:44px} .cmp__cas-un{padding:18px 17px;border-radius:20px} .cmp__cas-un p{margin-top:9px;font-size:.91rem;line-height:1.45} .cmp__vers{padding-top:14px} .cmp__cas-un:hover{transform:none} .cmp__aide{padding:22px 18px} .cmp__aide p{margin-top:12px;font-size:.94rem;line-height:1.55} .cmp__btns{margin-top:20px;gap:10px} /* =========================================================================== 4. LE QUESTIONNAIRE --------------------------------------------------------------------------- Une question par écran : la carte mesure 592 px, elle tient déjà. Ce qui manquait, c'était la taille des zones qu'on touche. Mesuré avant : le bouton « Revenir à la question précédente » faisait 26 px de haut. Les réponses, elles, étaient déjà à 52 px. =========================================================================== */ .qz__retour{ display:inline-flex;align-items:center; min-height:44px;padding-right:6px; } .qz__opt{min-height:52px} /* La carte respire un peu moins pour laisser voir le début des réponses sans avoir à défiler. */ .qz__head{margin-bottom:24px} .qz__top{margin-bottom:18px} .qz__opts{margin-top:18px} .qz__bas{margin-top:20px} .qz__pq{padding:16px 15px} .qz__go{margin-top:20px} .qz__opt:hover{transform:none} /* =========================================================================== 5. LE PÉRIMÈTRE : « inclus » et « jamais inclus » --------------------------------------------------------------------------- 1 180 px pour seize lignes, à cause d'une marge intérieure de 30 px et d'un interligne prévu pour un écran large. C'est la liste qui rassure : elle reste entièrement dépliée, on la resserre seulement. =========================================================================== */ .pe__cols{gap:10px} .pel{padding:20px 18px;border-radius:20px} .pel h3{margin-bottom:14px;font-size:1.02rem;gap:9px} .pel ul{gap:9px} .pel li{padding-left:17px;font-size:.91rem;line-height:1.45} .pel li::before{top:.58em} .pe__rule{margin-top:10px;padding:20px 18px;border-radius:20px} .pe__rule p{font-size:.93rem;line-height:1.55} /* =========================================================================== 6. LA RUBRIQUE VIZION --------------------------------------------------------------------------- 1 168 px pour une carte qui dit « si votre projet va plus loin, voyez plutôt eux ». C'est une information de fin de page : elle doit être claire, pas monumentale. =========================================================================== */ .pv__card{padding:22px 18px;gap:20px} .pv__logo{max-width:150px} .pv__base,.pv__lieu{font-size:.88rem;line-height:1.45} .pv__cit{font-size:.94rem;line-height:1.5;padding-left:14px} .pv__cit cite{margin-top:8px;font-size:.8rem} .pv__titre{margin-top:18px;font-size:.92rem} .pv__liste{gap:8px;margin-top:10px} .pv__liste li{font-size:.9rem;line-height:1.4} .pv__gens{margin-top:18px;font-size:.9rem;line-height:1.45} .pv__actions{margin-top:18px} .pv__mise-au-point{margin-top:16px;font-size:.82rem;line-height:1.45} /* Les deux fiches de contact passent l'une sous l'autre : côte à côte sur 358 px, le nom « Lucas Gonzalez » se coupait en deux. */ .pv__duo{flex-direction:column;gap:10px} .pv__duo li{width:100%} /* =========================================================================== 7. LA PAGE MÉTHODE : LES SIX ÉTAPES --------------------------------------------------------------------------- 1 067 px pour six étapes, dont 40 px de vide sous chacune. Le fil vertical qui relie les numéros reste : c'est lui qui raconte l'enchaînement. =========================================================================== */ .st{gap:14px;padding-bottom:24px} .st__n{width:34px;height:34px;font-size:.86rem} .steps__rail{left:17px} .st h3{margin:6px 0 6px;font-size:1.06rem} .st p{font-size:.93rem;line-height:1.5} .me__note{padding:18px 17px;font-size:.9rem;line-height:1.5} /* =========================================================================== 8. LA RESPIRATION GÉNÉRALE --------------------------------------------------------------------------- Chaque section réserve 76 px de vide en haut ET en bas : entre deux sections, cela fait 152 px de blanc, soit un cinquième d'écran de téléphone pour ne rien dire. On descend à 48 px, ce qui laisse encore une coupure franche entre deux sujets. Cette variable n'existe que sur ces deux pages : la feuille n'est chargée nulle part ailleurs. =========================================================================== */ :root{--pad-s:48px} .shead,.of__head{margin-bottom:30px} .shead .lead,.of__head .lead{margin-top:14px} .of__head .h2,.shead .h2{line-height:1.1} .lead{font-size:1rem;line-height:1.5} .band__btns{margin-top:22px} .band__btns .btn{width:100%;min-height:48px} } /* fin @media (max-width:700px) */ /* =========================================================================== 9. MOUVEMENT RÉDUIT --------------------------------------------------------------------------- Le seul mouvement ajouté par cette feuille est le « + » qui pivote en croix. Réglage système « limiter les animations » : il change d'état sans tourner. Le déroulé reste parfaitement utilisable. =========================================================================== */ @media (prefers-reduced-motion:reduce){ .op__det > summary .ic{transition:none} .cmp__scroll{scroll-snap-type:none} }