/* ===========================================================================
   TÉLÉPHONE — LA PAGE D'ACCUEIL, ET ELLE SEULE
   ---------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE
   Le téléphone n'est pas la version « au rabais » du site : c'est l'écran
   sur lequel la plupart des visiteurs arriveront. Or l'accueil, replié sur
   une seule colonne, devenait un mur : 13 141 px de haut à 390 px de large,
   soit près de seize écrans à faire défiler. Six grosses fiches empilées
   pour « Ce que vous obtenez », huit pavés pour « L'offre en chiffres »,
   trois cartes de prix hautes comme la main… La même information tient
   dans deux fois moins de place.

   OÙ IL SE PLACE
   Chargé EN DERNIER sur index.html, APRÈS telephone.css (qui reste la base
   commune des 7 pages et n'est pas touché ici). Ses règles gagnent donc
   naturellement, sans un seul « !important ».
   Il n'est chargé QUE par index.html : rien de ce qui suit ne peut abîmer
   une autre page.

   CE QUI EST RESPECTÉ
   - Rien ne change au-dessus de 680 px de large : le grand écran est
     intact (vérifié à 1400 px).
   - Aucun contenu n'est supprimé. Ce qui se replie s'ouvre d'un doigt,
     et reste ouvert si le JavaScript ne tourne pas.
   - Aucune animation n'est le seul moyen de voir un contenu.
   - Uniquement « transform » et « opacity » ; aucun filtre.
   - Tout ce qui se touche fait au moins 44 px.
   - « Mouvement réduit » respecté (§ 9).

   LES QUATRE RÉPONSES, UNE PAR SECTION
   Elles ne sont volontairement pas identiques : chaque section dit une
   chose différente, donc se replie différemment.
     § 2  « Le problème »        → une rangée qui se fait glisser du doigt
     § 3  « Ce que vous obtenez » → six titres qui se déroulent au toucher
     § 4  « Les formules »        → le prix passe à DROITE du nom
     § 5  « L'offre en chiffres » → le nombre passe à GAUCHE du texte
     § 6  « Pour aller plus loin »→ on resserre, tout simplement
     § 7  le pied de page         → deux colonnes au lieu d'une
   =========================================================================== */


/* ===========================================================================
   1. LA RESPIRATION GÉNÉRALE
   ---------------------------------------------------------------------------
   Le levier le plus bête et le plus efficace. « --pad-s » est l'air au-dessus
   et en dessous de CHAQUE section : 76 px en haut + 76 px en bas, sur huit
   sections, cela faisait à lui seul 1 200 px de vide à faire défiler.
   Sur un grand écran ce blanc est le luxe du site ; sur 390 px de large il
   n'est plus qu'une attente. On le ramène à 54 px, ce qui reste largement
   au-dessus du texte qu'il sépare.

   La variable est redéfinie ici sur :root : comme cette feuille n'est
   chargée que par l'accueil, aucune autre page n'en voit la couleur.
   =========================================================================== */
@media (max-width:680px){

  :root{
    --pad-s:54px;
  }

  /* Le chapeau de section (surtitre + titre + phrase) : 38 px sous le titre
     avant le contenu, c'était l'espacement d'un écran de 1 400 px. */
  .shead{margin-bottom:26px}
  .shead .lead{margin-top:14px}
  .eyebrow{margin-bottom:12px}

  /* La démonstration en haut de page commence sous la barre flottante ;
     on lui retire l'air en trop, la maquette parle d'elle-même. */
  .hero{padding-top:calc(66px + 26px)}

  /* Le bandeau d'appel final : 64 px de part et d'autre, c'était un écran
     presque vide sur un téléphone. */
  .band{padding:44px 0}
  .band .lead{margin-top:14px}
  .band__btns{margin-top:22px;gap:10px}
  /* Les deux boutons prennent toute la largeur : c'est plus facile à viser
     qu'un bouton centré de 200 px, et cela évite qu'ils se coupent en deux
     lignes bancales. */
  .band__btns .btn{width:100%;justify-content:center;min-height:50px}
}


/* ===========================================================================
   2. « LE PROBLÈME » — LES TROIS CHIFFRES QUI SE FONT GLISSER
   ---------------------------------------------------------------------------
   Mesuré : 1 188 px. Trois cartes noires empilées, chacune avec un grand
   nombre, un paragraphe et sa source. Trois, c'est justement le bon compte
   pour une rangée qu'on fait glisser du doigt : on garde les trois cartes
   entières, elles ne coûtent plus que la hauteur d'une seule.

   L'INDICE VISUEL — c'est le point délicat de ce procédé : ce qui sort de
   l'écran ne se devine pas. Les cartes ne font donc que 78 % de la largeur :
   le bord de la suivante dépasse toujours de 60 px environ. C'est ce
   morceau qui dit « il y en a d'autres à droite », mieux que n'importe
   quelle flèche.

   Le débordement va d'un bord à l'autre de l'écran (marge négative égale à
   la gouttière) : sinon la carte suivante disparaîtrait sous une marge
   blanche au lieu de dépasser franchement.
   =========================================================================== */
@media (max-width:680px){

  .pb__cards{
    display:flex;
    gap:12px;
    margin-top:28px;

    /* la rangée mord sur les deux gouttières de la page */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);

    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;   /* on ne tire pas la page avec le doigt */
    -webkit-overflow-scrolling:touch;

    /* la barre de défilement est masquée : le bord de la carte suivante
       suffit à dire qu'on peut glisser, et une barre grise en travers de
       trois cartes noires salirait la section */
    scrollbar-width:none;
  }
  .pb__cards::-webkit-scrollbar{display:none}

  .pbc{
    flex:0 0 78%;
    scroll-snap-align:start;
    padding:20px 18px 18px;
  }

  /* 🔴 Au repos, ces trois cartes sont VISIBLES.
     Elles font partie de la liste d'éléments que style.css met à
     « opacity:0 » en attendant leur apparition. Dans une rangée qui
     glisse, la troisième carte est hors de l'écran : elle ne serait donc
     jamais révélée tant qu'on n'a pas glissé, et surtout le bord qui
     dépasse — le seul indice qu'il y a une suite — serait transparent.
     On rend donc la rangée entière visible d'emblée. Le titre et la phrase
     de la section, eux, gardent leur apparition. */
  .pbc{opacity:1;transform:none}

  .pbc__n{font-size:2.7rem}
  .pbc__u{font-size:1.25rem}
  .pbc p{margin-top:12px;font-size:.9rem;line-height:1.45}
  .pbc cite{margin-top:10px;font-size:.72rem}
  .pb .lead{margin-top:16px}
}


/* ===========================================================================
   3. « CE QUE VOUS OBTENEZ » — LES SIX FICHES QUI SE DÉROULENT
   ---------------------------------------------------------------------------
   Mesuré : 1 999 px pour la section, dont 1 353 px pour la seule grille.
   Six pavés identiques les uns sous les autres : pour savoir ce que
   contient la section, il fallait faire défiler six fois.

   LA RÉPONSE : le titre reste visible, le paragraphe se replie et s'ouvre
   au toucher. C'est la balise <details> du navigateur, sans une ligne de
   JavaScript pour l'ouvrir et la fermer : accessible au clavier, annoncée
   correctement par les lecteurs d'écran, et elle se déplie même à
   l'impression et à la recherche dans la page.

   POURQUOI ELLES SONT ÉCRITES « OUVERTES » DANS LE HTML
   Sur un grand écran, il n'y a pas de repli du tout : les six fiches sont
   entières, exactement comme avant. Elles sont donc écrites avec
   l'attribut « open », et un petit script de trois lignes, posé juste
   sous la section, les referme UNIQUEMENT sous 680 px (la première reste
   ouverte, elle montre le geste). Sans JavaScript, tout reste donc lisible :
   c'est l'état de repos qui est le bon.
   =========================================================================== */

/* --- ce qui vaut à TOUTES les tailles : neutraliser l'apparence de
       « widget » que le navigateur donne d'office à <summary> ------------- */
.bc__sum{list-style:none}
.bc__sum::-webkit-details-marker{display:none}
.bc__sum::marker{content:''}
/* le « + » n'existe que sur téléphone */
.bc__pl{display:none}

/* --- GRAND ÉCRAN : la fiche est un bloc, comme avant ------------------- */
@media (min-width:681px){
  /* summary redevient une simple boîte : l'icône et le titre reprennent
     exactement la place qu'ils avaient dans l'ancien <article>. */
  .bc__sum{display:block;cursor:default}
  /* On ne peut pas refermer une fiche par mégarde en cliquant sur son
     titre : au-dessus de 680 px, il n'y a rien à replier. */
  .bc__sum{pointer-events:none}
}

/* --- TÉLÉPHONE : six lignes qu'on déroule ------------------------------ */
@media (max-width:680px){

  .ben__grid{border-radius:20px}

  /* la marge intérieure passe sur la ligne elle-même, pas sur la fiche :
     c'est la ligne entière qui doit être touchable */
  .bc{padding:0}

  .bc__sum{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:54px;          /* bien au-delà des 44 px demandés */
    padding:13px 16px;
    cursor:pointer;
  }

  /* l'icône rétrécit et vient se ranger devant le titre */
  .bc__i{width:21px;height:21px;margin-bottom:0;flex:none}

  .bc h3{
    font-size:1rem;
    line-height:1.25;
    margin-bottom:0;
    flex:1 1 auto;
    text-wrap:balance;
  }

  /* le « + » du site, celui des questions fréquentes : il pivote d'un
     huitième de tour quand la fiche s'ouvre. Uniquement une rotation,
     donc rien à recalculer. */
  .bc__pl{
    display:block;
    width:17px;height:17px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
    color:var(--ink-3);
    transition:transform .35s cubic-bezier(.16,1,.3,1),color .25s;
  }
  .bc[open] .bc__pl{transform:rotate(45deg);color:var(--blue)}

  /* le texte, une fois déroulé : aligné sous le titre, pas sous l'icône */
  .bc p{
    margin:0;
    padding:0 16px 16px 49px;
    font-size:.9rem;
    line-height:1.5;
  }

  /* La bande de photos sous les fiches : deux images suffisent à donner le
     ton, on les resserre. */
  .ben__ph{margin-top:26px;gap:10px}
}


/* ===========================================================================
   4. « LES FORMULES » — LE PRIX PASSE À DROITE DU NOM
   ---------------------------------------------------------------------------
   Mesuré : 1 282 px. Trois cartes hautes de 280 px chacune, où le nom, le
   prix, la phrase et le lien s'empilaient sur quatre lignes. Or un prix se
   compare : il doit être aligné d'une carte à l'autre, à hauteur d'œil.

   On passe donc chaque carte en deux colonnes : à gauche le nom et ce qu'on
   obtient, à droite le prix, en gros, centré sur les deux. Les trois prix
   se lisent alors dans une même colonne verticale — 290, 390, 590 — ce qui
   est exactement le geste que la version ordinateur produit avec ses trois
   cartes côte à côte. Sur ce point, le téléphone fait mieux : la comparaison
   tient dans un seul écran.

   Les zones nommées permettent de ranger le badge « La plus demandée » sans
   décaler les deux autres cartes : la ligne « badge » est simplement vide
   quand il n'y a pas de badge.
   =========================================================================== */
@media (max-width:680px){

  .ap__grid{max-width:none;gap:10px}

  .apc{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "badge badge"
      "titre prix"
      "sous  prix"
      "lien  lien";
    column-gap:14px;
    align-items:center;
    padding:15px 18px 13px;
    border-radius:22px;
  }

  /* 🔴 LA PASTILLE « LA PLUS DEMANDÉE » REDESCEND DANS LA CARTE.
     premium.css la pose en position ABSOLUE dans le coin haut-gauche, et
     réserve la place correspondante en haut des TROIS cartes : c'est ce qui
     aligne les trois titres côte à côte sur un grand écran. Empilées sur un
     téléphone, les cartes n'ont plus rien à aligner entre elles, et cette
     réserve coûtait 26 px de vide en haut de chacune. On rend donc la
     pastille à la mise en page : elle reprend sa place dans la grille, et
     seule la carte qui la porte est un peu plus haute. */
  .apc__b{
    position:static;
    grid-area:badge;
    align-self:start;
    justify-self:start;
    height:23px;
    margin:0 0 9px;
    padding:0 11px;
    font-size:.66rem;
  }
  .apc__k{grid-area:titre;align-self:end;font-size:1.08rem}
  .apc__s{grid-area:sous;align-self:start;margin-top:3px;font-size:.84rem}

  .apc__p{
    grid-area:prix;
    margin:0;
    justify-self:end;
    align-self:center;
  }
  .apc__p span{font-size:2.35rem}
  .apc__p em{font-size:1.05rem}

  .apc__go{
    grid-area:lien;
    margin-top:11px;
    padding-top:10px;
    font-size:.86rem;
  }

  .ap__note{margin-top:20px;font-size:.8rem;line-height:1.5}
}


/* ===========================================================================
   5. « L'OFFRE EN CHIFFRES » — LE NOMBRE PASSE À GAUCHE DU TEXTE
   ---------------------------------------------------------------------------
   Mesuré : 2 247 px, dont 1 715 px pour le seul panneau turquoise. C'était
   le plus gros morceau de la page : huit cellules empilées, chacune avec un
   nombre énorme, un libellé, puis une explication.

   Ici on ne peut RIEN replier ni raccourcir : ces huit explications sont
   des engagements écrits (le délai, le nombre de corrections, les fichiers
   remis…). C'est aussi elles qui portent l'information quand le visiteur a
   demandé « mouvement réduit » : les compteurs restent alors figés sur 0 et
   seule la phrase dit encore « 5 à 10 jours ouvrés ». Les cacher serait une
   faute.

   La place se gagne donc autrement : le nombre quitte le dessus du texte
   pour se ranger à sa GAUCHE, dans une colonne étroite. Chaque cellule perd
   la hauteur du nombre, celle de sa marge, et deux lignes de blanc. Le
   panneau garde ses huit chiffres et ses huit explications, en 40 % de
   moins.
   =========================================================================== */
@media (max-width:680px){

  .ab-nums__tag{
    padding:12px 16px;
    font-size:.7rem;
    letter-spacing:.1em;
    gap:8px;
  }

  .ab-nums__grid{grid-template-columns:1fr}

  .ab-num{
    display:grid;
    grid-template-columns:84px 1fr;
    column-gap:13px;
    align-items:start;
    padding:15px 16px 16px;
  }

  /* le nombre, à gauche, sur les deux lignes de texte */
  .ab-num__v{
    grid-column:1;
    grid-row:1 / span 2;
    margin-top:1px;
  }
  .ab-num__n{font-size:1.95rem}
  .ab-num__u{font-size:.95rem}
  /* le « à » de « 5 à 10 jours » : sans cette retaille, la cellule des
     délais déborde de sa colonne de 84 px et retombe sur trois lignes. */
  .ab-num__sep{font-size:.85rem;margin:0 .1em}

  .ab-num__k{
    grid-column:2;
    grid-row:1;
    margin-top:0;
    font-size:.95rem;
    line-height:1.25;
  }
  .ab-num__d{
    grid-column:2;
    grid-row:2;
    margin-top:5px;
    font-size:.82rem;
    line-height:1.45;
  }

  /* la mise en garde sous le panneau */
  .ab-nums__foot{
    margin-top:18px;
    padding-left:14px;
    gap:10px;
  }
  .ab-nums__foot p{font-size:.84rem;line-height:1.5}
}


/* ===========================================================================
   6. « POUR ALLER PLUS LOIN » — ON RESSERRE, TOUT SIMPLEMENT
   ---------------------------------------------------------------------------
   Mesuré : 976 px. Trois cartes, mais elles ne portent presque rien : un
   titre, deux phrases, un lien. Pas de repli ni de glissement à inventer —
   c'était juste de la marge intérieure de grand écran (38 px sur chaque
   bord) et une interligne trop généreuse. On resserre, et la section entière
   tient dans un écran et demi.

   Le lien reste une zone de 44 px : la carte entière est cliquable, mais la
   ligne « La méthode → » est ce que le doigt vise.
   =========================================================================== */
@media (max-width:680px){

  .go__grid{max-width:none;gap:10px}

  .goc{
    padding:15px 18px 13px;
    border-radius:20px;
  }
  .goc h3{font-size:1.02rem;line-height:1.25;margin-bottom:6px}
  .goc p{font-size:.87rem;line-height:1.45}
  .goc__go{
    margin-top:11px;
    min-height:26px;
    font-size:.86rem;
  }
}


/* ===========================================================================
   7. LE PIED DE PAGE — DEUX COLONNES AU LIEU D'UNE
   ---------------------------------------------------------------------------
   Mesuré : 1 030 px. style.css range ses trois groupes de liens les uns
   sous les autres sous 680 px ; telephone.css leur a — à juste titre —
   donné 44 px de hauteur chacun pour le doigt. Dix liens de 44 px en file
   indienne, cela fait un pied de page plus haut qu'un écran.

   Deux colonnes suffisent : « Le service » et « Informations » se
   partagent la première ligne, « Contact » occupe la seconde. Les 44 px
   sont conservés, on ne fait que les ranger côte à côte.
   =========================================================================== */
@media (max-width:680px){

  .ft{padding-top:34px}
  .ft__in{gap:24px}
  .ft__brand p{margin-top:11px;font-size:.82rem;line-height:1.5}

  .ft__nav{grid-template-columns:1fr 1fr;gap:16px 18px}
  .ft__nav>div{padding-top:16px}

  /* 44 px de haut : la règle de telephone.css est reprise telle quelle,
     seule la taille du texte descend d'un cran pour tenir sur une colonne
     de 165 px. */
  .ft__nav a,.ft__nav span{font-size:.86rem;min-height:44px}
  .ft__nav h3{margin-bottom:4px}

  .ft__btm{margin-top:22px;font-size:.76rem}
}

/* Sous 340 px (les tout petits téléphones), deux colonnes couperaient
   « Exemples de mise en page » en quatre lignes : on repasse à une seule. */
@media (max-width:339px){
  .ft__nav{grid-template-columns:1fr}
}


/* ===========================================================================
   8. LE MOT « SITERO » ET LE BANDEAU DES MÉTIERS
   ---------------------------------------------------------------------------
   Deux respirations de la page, mesurées à 250 px et 69 px. On ne touche
   pas au mot lui-même — c'est la signature du site — mais l'air autour de
   lui était calculé pour un écran large : 56 px au-dessus et en dessous.
   =========================================================================== */
@media (max-width:680px){
  .mot{padding-block:28px}
}


/* ===========================================================================
   9. MOUVEMENT RÉDUIT
   ---------------------------------------------------------------------------
   Une seule chose bouge dans tout ce fichier : le « + » des six fiches, qui
   pivote. On l'immobilise ; la fiche s'ouvre et se ferme quand même, et le
   « + » reste un « + » lisible.
   La rangée qui se fait glisser ne s'anime pas : « scroll-snap » est un
   calage, pas une animation. On coupe tout de même le défilement doux, qui
   est un mouvement.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  .bc__pl{transition:none}
  .pb__cards{scroll-behavior:auto}
}