/* =========================================================================== TÉLÉPHONE — LES DEUX PAGES DE PREUVE : « Exemples » et « Contact » --------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE Le site a été dessiné pour un grand écran, puis rattrapé sur téléphone par « telephone.css ». Ce rattrapage règle ce qui était CASSÉ (le menu, les zones à toucher, les débordements). Il ne règle pas ce qui est simplement TROP LONG. Mesuré à 390 px de large, avant ce fichier : Exemples : 7 263 px de haut, soit 8,6 écrans de téléphone. dont 1 930 px pour les 4 cartes d'exemple (une par écran) et 2 862 px pour la galerie de 10 photos empilées. Contact : 7 156 px de haut, soit 8,5 écrans. dont 1 458 px de formulaire et 2 530 px pour « qui est derrière », un mur de texte de quatre paragraphes. LE PRINCIPE RETENU Le téléphone n'est plus le format dégradé : c'est le format principal. On ne rétrécit donc pas la version ordinateur, on RE-DESSINE trois blocs dans la logique du doigt : 1. les 4 exemples passent en DEUX COLONNES : on les voit tous les quatre d'un coup d'œil, au lieu de les découvrir un par un ; 2. la galerie devient une BANDE QUI GLISSE du doigt, comme une pellicule photo — avec une phrase qui le dit et la photo suivante qui dépasse pour le montrer ; 3. la longue présentation de Contact se REPLIE derrière un « Lire la suite », sans une ligne de JavaScript. OÙ IL EST CHARGÉ Sur ces deux pages seulement, et APRÈS « telephone.css » : ses règles gagnent donc naturellement, sans un seul « !important » inventé ici. (Les rares « !important » ci-dessous ne font qu'annuler ceux que galerie.css avait déjà posés — on ne peut pas faire autrement.) LES RÈGLES DU PROJET, RESPECTÉES - rien ne change au-dessus de 900 px : tout est dans un « @media » ; - l'état de repos est TOUJOURS visible : aucun contenu ne dépend d'une animation pour apparaître ; - uniquement « transform » et « opacity » ; - 44 px minimum pour tout ce qui se touche ; - « prefers-reduced-motion » respecté ; - aucune dépendance extérieure, aucun script. =========================================================================== */ /* =========================================================================== PAGE EXEMPLES — 1. LES QUATRE CARTES, EN DEUX COLONNES --------------------------------------------------------------------------- Mesuré : 4 cartes de 457 à 480 px, empilées = 1 930 px. Autrement dit, pour savoir qu'il existe un quatrième exemple, il fallait faire défiler plus de deux écrans entiers. Une carte, c'est une capture d'écran + un nom + une phrase + une étiquette de prix. Sur un téléphone, la capture et le nom suffisent à choisir : la phrase, elle, est justement ce qu'on va lire EN OUVRANT l'exemple, à un doigt de distance. On la retire donc sous 560 px — c'est le seul contenu volontairement masqué de ce fichier, et il est signalé dans le rapport. =========================================================================== */ @media (max-width:900px){ /* style.css remettait une seule colonne sous 900 px. Deux colonnes tiennent très bien : à 390 px chaque carte fait 168 px de large, c'est-à-dire la taille d'une vignette d'application. */ .ex__grid{ grid-template-columns:repeat(2,1fr); gap:16px 14px; } /* Le titre de la page respire moins : sur un téléphone, 38 px de blanc avant la première carte, c'est un cinquième d'écran perdu. */ .ex .shead{margin-bottom:26px} .ex .shead .lead{margin-top:16px} } @media (max-width:560px){ /* La barre du faux navigateur se resserre : elle sert à faire comprendre « ceci est un site », pas à occuper de la place. */ .exd__bar{padding:6px 9px;gap:5px} .exd__bar i{width:6px;height:6px} /* Le nom du site : un cran plus petit, il tient sur une ligne. */ .exd__lien h3{margin-top:10px;font-size:.95rem;line-height:1.25} /* 🔴 LE SEUL CONTENU MASQUÉ DE CE FICHIER. La phrase de description disparaît sous 560 px. Elle décrit ce que l'exemple contient — or l'exemple lui-même s'ouvre en un doigt juste au-dessus, et il le montre mieux qu'une phrase. */ .exd__lien p{display:none} /* Le pied de carte passe en colonne : l'étiquette de prix, puis l'invitation à ouvrir. Côte à côte, ils se coupaient en deux. */ .exd__pied{ display:flex;flex-direction:column;align-items:flex-start; gap:7px;margin-top:9px; } .exd__tag{padding:4px 10px;font-size:.7rem} .exd__go{font-size:.8rem;gap:6px} /* La pastille « Réalisation réelle » revient à la ligne sous le nom au lieu de pousser le titre sur trois lignes. */ .exd__reel{margin-left:0;margin-top:5px;font-size:.58rem;padding:3px 8px} .exd--reel .exd__lien h3{display:flex;flex-direction:column;align-items:flex-start} /* La carte entière reste une seule zone à toucher, très au-delà des 44 px demandés : c'est toute la vignette qui est sensible. */ } /* =========================================================================== PAGE EXEMPLES — 2. LA GALERIE, UNE BANDE QUI GLISSE --------------------------------------------------------------------------- Mesuré : 10 photos en une seule colonne = 2 862 px, soit près de trois écrans et demi de photos d'ambiance. C'est le plus gros morceau de la page, et c'est le moins important : ces photos illustrent une façon de travailler, elles ne vendent rien. On en fait une pellicule qu'on fait glisser du doigt. Trois précautions : - la bande déborde jusqu'aux DEUX bords de l'écran (marge négative égale à la gouttière) : une bande qui s'arrête avant le bord ne donne pas envie de la pousser ; - chaque photo occupe 68 % de la largeur, donc la suivante DÉPASSE toujours : c'est ce bout visible qui dit « ça continue » ; - une phrase le dit en toutes lettres au-dessus (.gal__glisse). « scroll-snap » cale la photo suivante au même endroit que le texte de la page, pas au ras du bord : c'est ce qui donne l'impression d'un objet bien rangé plutôt que d'un tapis roulant. ⚠️ Les « !important » de ce bloc n'inventent rien : ils annulent ceux que galerie.css a posés sur « grid-column » pour ses propres colonnes. En passant la bande en « flex », ces déclarations de grille ne servent plus à rien, mais elles restent plus fortes que tout ce qu'on écrirait sans « !important ». =========================================================================== */ @media (max-width:640px){ .gal{padding-top:4px} .gal__head{margin-bottom:20px} .gal__lead{margin-bottom:10px} /* La phrase-indice. Elle n'existe que sur téléphone : sur un ordinateur, la mosaïque se voit d'un seul coup et rien ne glisse. */ .gal__glisse{ display:flex;align-items:center;gap:8px; margin:0 0 12px; color:var(--ink-3);font-size:.82rem;line-height:1.4; } .gal__glisse .ic{font-size:1.05rem;color:var(--tint);flex:none} .gal__mos{ display:flex; grid-template-columns:none; grid-auto-rows:auto; gap:12px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); -webkit-overflow-scrolling:touch; /* la bande file jusqu'aux bords de l'écran, puis se recale sur la gouttière du texte grâce au padding qui compense */ margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); /* de la place pour l'ombre des cadres, sinon elle est rognée */ padding-block:6px 10px; scrollbar-width:none; } .gal__mos::-webkit-scrollbar{display:none} .gal__it{ flex:0 0 68%; min-width:0; scroll-snap-align:start; grid-column:span 1!important; grid-row:span 1!important; } /* La dernière photo doit pouvoir venir se caler à gauche comme les autres : sans cette réserve, elle bute contre la fin de la bande. */ .gal__it:last-child{margin-right:calc(var(--gut) - 12px)} /* Toutes les photos au même format : dans une bande, c'est l'alignement du bas qui fait la propreté. La spécificité (0,2,0) égale celle de galerie.css, et ce fichier est lu après : il gagne. */ .gal__mos .gal__cadre{aspect-ratio:4/3;flex:none} .gal__cap{margin-top:8px;font-size:.78rem} } /* Au-dessus de 640 px, la phrase-indice n'a plus de sens : la mosaïque ne glisse pas, elle s'affiche en entier. */ @media (min-width:641px){ .gal__glisse{display:none} } /* =========================================================================== PAGE EXEMPLES — 3. LE BANDEAU DE FIN Il ne porte qu'un titre, une phrase et deux boutons : il n'a pas besoin de 404 px. On lui laisse de l'air, pas un écran. =========================================================================== */ @media (max-width:640px){ .band{padding:52px 0} .band .lead{margin-top:14px} .band__btns{margin-top:22px;gap:10px} .band__btns .btn{width:100%;justify-content:center;min-height:50px} } /* =========================================================================== PAGE CONTACT — 4. LE FORMULAIRE --------------------------------------------------------------------------- Mesuré : 1 458 px, soit près de deux écrans pour douze champs. Trois causes, aucune n'est le nombre de champs : - la carte garde 26 px de marge intérieure sur un écran de 390 ; - chaque champ traîne 18 px de blanc sous lui, douze fois de suite ; - les paires « nom / entreprise » et « e-mail / téléphone », prévues côte à côte, se dépilent en dessous de 680 px et coûtent quatre champs pleine hauteur au lieu de deux. ⚠️ Aucun identifiant, aucun « name » n'est touché : le questionnaire de la page Formules retrouve ses champs par #f-off, #f-msg et les boutons name="contenus". On ne déplace rien, on resserre. =========================================================================== */ @media (max-width:560px){ .frm{padding:20px 16px;border-radius:var(--r-l)} /* Les paires reviennent côte à côte : à 390 px, chaque champ fait 150 px, ce qui suffit largement pour un nom ou un numéro, et fait gagner deux champs entiers de hauteur. */ .frm__r2{grid-template-columns:1fr 1fr;gap:0 12px} .fld{margin-bottom:13px;gap:6px} .fld label,.fld legend{font-size:.82rem} /* 🔴 La taille du texte des champs reste à 1 rem (16 px) : en dessous, Safari sur iPhone agrandit tout seul la page à la première frappe et le visiteur se retrouve dans un formulaire à moitié hors écran. */ .fld input[type=text],.fld input[type=email],.fld input[type=tel], .fld select,.fld textarea{padding:12px 13px} .fld select{padding-right:36px;background-position:right 11px center} .fld textarea{min-height:84px} /* Les pastilles Oui / Non se resserrent sans descendre sous 44 px. */ .fld--fs{gap:8px} .rad{min-height:44px;margin-right:8px;margin-bottom:6px} .rad label{font-size:.9rem} .fld--chk{margin-top:16px;gap:10px} .fld--chk label{font-size:.86rem} .frm__rgpd{margin:12px 0 16px;font-size:.76rem;line-height:1.45} /* Le bouton d'envoi : pleine largeur, bien haut, c'est le geste principal de la page. */ #frmBtn{min-height:52px} } /* La colonne de gauche : la photo d'ambiance reste, mais elle ne doit pas retarder l'arrivée au formulaire. */ @media (max-width:900px){ .ct__left .lead{margin-top:16px} .ct__co{margin-top:24px} .ct__mini{margin-top:16px} .ct__ph{margin-top:24px;aspect-ratio:16/10} } /* =========================================================================== PAGE CONTACT — 5. LES QUESTIONS FRÉQUENTES --------------------------------------------------------------------------- Bonne nouvelle : c'est déjà un vrai « details / summary », donc ça se déroule sans JavaScript et ça se lit au clavier comme au lecteur d'écran. Il n'y avait rien à refaire, seulement à resserrer : 26 px de marge au-dessus ET en dessous de chaque question, neuf fois de suite. La zone à toucher reste très au-dessus de 44 px (mesuré : 75 px). =========================================================================== */ @media (max-width:640px){ .fq .shead{margin-bottom:22px} .ac summary{padding:17px 12px;margin-inline:-12px;gap:14px} .ac__b{padding:0 12px 20px;margin-inline:-12px} .ac__b p{font-size:.96rem;line-height:1.58} } /* =========================================================================== PAGE CONTACT — 6. « QUI EST DERRIÈRE » : LA SUITE SE DÉPLIE --------------------------------------------------------------------------- Mesuré : 2 530 px, dont environ 780 px pour trois paragraphes de présentation. C'est un texte qui mérite d'être lu — mais pas imposé à quelqu'un qui cherchait juste un numéro de téléphone. COMMENT C'EST FAIT, ET POURQUOI COMME ÇA Une case à cocher invisible + une étiquette « Lire la suite ». Zéro JavaScript, ça marche dans tous les navigateurs, et surtout : LE TEXTE EST TOUJOURS DANS LA PAGE. Il n'est pas retiré, il est seulement écourté à l'écran — un lecteur d'écran le lit en entier, Google l'indexe en entier. Pourquoi pas un « details » comme la FAQ ? Parce qu'un « details » est ouvert ou fermé pour TOUT LE MONDE : il n'existe aucun moyen, en CSS, de le laisser ouvert sur ordinateur et fermé sur téléphone. La case à cocher, elle, se désactive proprement au-dessus de 900 px. =========================================================================== */ /* La case elle-même : invisible à l'œil, mais bien réelle — on peut l'atteindre au clavier, et le halo de mise au point s'affiche alors autour de l'étiquette. Jamais « display:none » : ça la retirerait du parcours au clavier. */ .ab-me__box{ position:absolute; width:1px;height:1px; margin:0;padding:0;border:0; opacity:0; pointer-events:none; } /* Sur ordinateur : rien de tout cela n'existe. Les trois paragraphes s'affichent comme avant, l'étiquette disparaît. */ .ab-me__long{display:contents} .ab-me__plus{display:none} @media (max-width:900px){ /* Le bloc redevient une vraie boîte pour pouvoir être écourté. On garde environ six lignes : de quoi voir que c'est un texte personnel et pas une mention légale. */ .ab-me__long{ display:block; position:relative; max-height:11.5em; overflow:hidden; } /* Le dégradé du bas dit « ça continue » sans écrire un mot. Il est en « pointer-events:none » : il ne doit jamais avaler un doigt. */ .ab-me__long::after{ content:''; position:absolute;left:0;right:0;bottom:0;height:3.4em; background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper,#f5f5f7) 88%); pointer-events:none; } /* 🔴 CEINTURE ET BRETELLES : les paragraphes écourtés portent la classe « reveal », qui les met à zéro d'opacité en attendant leur tour. S'ils n'arrivent jamais à l'écran (parce qu'ils sont rognés), ils resteraient invisibles APRÈS le dépliage. On les rend donc visibles d'office ici : sur téléphone, ce texte n'a plus d'apparition. */ .ab-me__long .ab-me__p{opacity:1;transform:none;margin-top:17px} .ab-me__plus{ display:inline-flex;align-items:center;gap:9px; margin-top:14px;min-height:46px;padding:0 2px; color:var(--tint);font-size:.94rem;font-weight:600;letter-spacing:-.01em; cursor:pointer; -webkit-tap-highlight-color:transparent; } /* Le petit chevron, dessiné en CSS : pas d'image, pas de police d'icônes. Il pivote vers le haut une fois le texte déplié. */ .ab-me__plus::after{ content:'';width:8px;height:8px;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--e-out,cubic-bezier(.16,1,.3,1)); } /* L'état déplié. */ .ab-me__box:checked ~ .ab-me__long{max-height:none} .ab-me__box:checked ~ .ab-me__long::after{display:none} .ab-me__box:checked ~ .ab-me__plus::after{transform:translateY(2px) rotate(-135deg)} .ab-me__box:checked ~ .ab-me__plus .ab-me__plus-o{display:none} .ab-me__plus .ab-me__plus-f{display:none} .ab-me__box:checked ~ .ab-me__plus .ab-me__plus-f{display:inline} /* La mise au point au clavier se voit sur l'étiquette, puisque la case est invisible. Sans cette règle, on naviguerait à l'aveugle. */ .ab-me__box:focus-visible ~ .ab-me__plus{ outline:2.5px solid var(--tint);outline-offset:4px;border-radius:10px; } } /* =========================================================================== PAGE CONTACT — 7. LE RESTE DU BLOC « QUI EST DERRIÈRE » Trois arguments et un encadré de transparence : rien à replier, juste à resserrer. Mesuré : 636 px pour les trois arguments, 332 px pour l'encadré. =========================================================================== */ @media (max-width:560px){ .ab-me__txt .lead{margin-top:16px} .ab-me__pts{margin-top:26px} .ab-me__pt{gap:13px;padding:16px 16px} .ab-me__pt .ic{font-size:1.2rem} .ab-me__pt b{font-size:.96rem} .ab-me__pt p{margin-top:5px;font-size:.9rem;line-height:1.5} .ab-me__note{margin-top:24px;padding:18px 18px 18px 16px} .ab-me__note h3{margin-bottom:7px;font-size:.96rem} .ab-me__note p{font-size:.9rem;line-height:1.55} .ab-me__go{margin-top:24px;gap:10px} .ab-me__go .btn{width:100%;justify-content:center;min-height:50px} } /* =========================================================================== PAGE CONTACT — 8. LA FICHE DE THIBAULT --------------------------------------------------------------------------- Cas particulier : sur un téléphone il n'y a pas de survol, donc son contenu est affiché EN PERMANENCE (fiche.css et telephone.css s'en chargent déjà, et c'est la bonne décision : un numéro de téléphone ne doit pas dépendre d'un geste impossible). Il restait deux détails d'apparence. Ouverte en permanence, la fiche n'est plus une pastille : c'est une carte. Or sa photo restait le petit rond de 58 px prévu pour l'état fermé, perdu à côté de trois lignes de texte ; et la fiche s'étirait sur toute la largeur au lieu de s'ajuster à son contenu. =========================================================================== */ @media (max-width:900px){ /* Elle prend la largeur de son texte, pas celle de l'écran. */ .ab-me__sign{margin:22px 0 26px} .ab-me__fente{max-width:max-content} .fiche{ align-items:center; gap:13px; padding:11px 20px 11px 11px; } /* La photo suit la forme de la carte : un rectangle doux, pas un rond de pastille. Elle grandit juste assez pour équilibrer les trois lignes de texte à côté d'elle. */ .fiche__ph{ width:66px;height:74px;border-radius:15px; margin-top:0; } .fiche__co b{font-size:1.02rem} .fiche__role{margin-top:1px;font-size:.76rem} .fiche__plus{margin-top:7px} .fiche__tel{font-size:1.08rem} .fiche__cta{margin-top:3px;font-size:.62rem;letter-spacing:.12em} /* La fiche est un lien vers le numéro : elle doit se toucher confortablement. Mesuré ainsi : 96 px de haut, très au-delà des 44 px demandés. */ .ab-me__ou{margin-top:12px;font-size:.84rem} } /* =========================================================================== 9. MOUVEMENT RÉDUIT Une seule chose bouge dans tout ce fichier : le chevron du « Lire la suite ». On l'arrête. Le dépliage lui-même n'est pas une animation, c'est un changement d'état : il continue de fonctionner. =========================================================================== */ @media (prefers-reduced-motion:reduce){ .ab-me__plus::after{transition:none} }