/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — reorganisation des mises en page sous 768 px
   ───────────────────────────────────────────────────────────────────────────
   POURQUOI CE FICHIER
   Chaque feuille du site (style.css, home.css, service.css) traitait le mobile
   par la meme reponse : « grid-template-columns: 1fr ». Tout ce qui etait cote
   a cote sur ordinateur devenait une pile. L'accueil faisait 8 700 px de haut
   sur un iPhone (10 ecrans), la page reservation 11 700 px (14 ecrans) : le
   visiteur devait defiler une minute entiere pour atteindre le tarif.

   Le parti pris ici n'est PAS de reduire les marges partout — c'est de choisir,
   bloc par bloc, la forme qui convient au petit ecran :

     · GRILLE 2×2      pour les series de valeurs courtes (chiffres, atouts) :
                       quatre elements tiennent en un demi-ecran au lieu de deux.
     · CARROUSEL       pour les series de cartes riches (offres, formules,
                       livrables) : on balaie horizontalement au lieu de defiler
                       sur trois hauteurs d'ecran. Le voisin depasse
                       volontairement de l'ecran — c'est ce depassement qui
                       signale qu'il y a une suite.
     · COTE A COTE     pour les comparatifs : un comparatif empile n'en est plus
                       un. Les deux colonnes restent cote a cote, allegees de
                       leurs sous-textes.
     · LIGNE COMPACTE  pour les etapes numerotees : pictogramme a gauche, texte
                       a droite, au lieu d'une carte pleine hauteur chacune.

   Et un principe transversal : sur telephone on garde les TITRES et on retire
   les sous-textes de confort quand le titre se suffit. Le detail complet reste
   accessible sur la page dediee, a un clic.

   ⚠️ Ce fichier se charge EN DERNIER. Il ne redefinit jamais de couleur ni de
   police : uniquement des mises en page. Aucun `!important` — si une regle ne
   passe pas, c'est la specificite qu'il faut corriger, pas la forcer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TABLETTE (769 – 1000 px)
   ───────────────────────────────────────────────────────────────────────────
   Les feuilles existantes passent a UNE colonne des 1000 px. A 900 px de large,
   une carte d'offre etalee sur toute la largeur mesure trois fois la longueur
   de ligne confortable. On repasse a deux colonnes.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1000px) {
  /* ⚠️ `.hm-steps` a QUITTE cette regle : les trois etapes sont devenues une
     timeline, et une timeline sur deux colonnes n'a plus d'ordre lisible — la
     ligne devrait sauter de la fin de la premiere ligne au debut de la seconde.
     Sous 1001px elle passe donc en rail VERTICAL (home.css), une seule colonne. */
  /* La grille compte trois elements : la derniere carte reste donc seule sur sa
     ligne. On a essaye de l'etaler sur les deux colonnes pour combler le trou —
     resultat : une carte deux fois plus large que ses jumelles, au contenu
     identique, donc a moitie vide sur la droite. Le trou se remarque moins que
     le desequilibre. */

  .hm-cmp {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. OUTILS PARTAGES — carrousel a defilement magnetique
   ───────────────────────────────────────────────────────────────────────────
   Une SEULE definition pour toutes les bandes du site, listees ici. Les
   sections qui suivent ne font plus que resserrer le CONTENU de leurs cartes.

   Le debordement lateral se calcule, il n'est pas ecrit en dur. Premiere
   version : `margin-inline: -20px`, valeur du caniveau de `.hm-wrap`. Mais
   `.container` en fait 16 sur les autres pages — la bande depassait alors de
   4 px a droite et donnait une barre de defilement horizontale a la PAGE, ce
   qui est exactement le defaut qu'on venait corriger.

   `calc(50% - 50vw)` vaut toujours l'oppose du caniveau reel, quel qu'il soit :
   le pourcentage se resout sur la largeur utile du parent, le `vw` sur celle de
   l'ecran ; leur demi-difference EST le caniveau. Le `padding` symetrique
   ramene ensuite la premiere carte a l'aplomb du texte au-dessus.

   ⚠️ Les deux bandes de /tarifs sont designees par leur IDENTIFIANT et non par
   leur classe. Cette page porte ses styles dans des <style> places DANS le
   <body> : ils passent apres ce fichier dans la cascade et gagnent a specificite
   egale. `.tr-resa__grid { display: grid }` reprenait donc la main et remettait
   les trois paliers en colonnes de 106 px. L'identifiant tranche sans avoir a
   sortir un `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .m-car,
  .sxc-cards,
  .sv-liv,
  .sv-plans,
  #pricing-grid,
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    padding-block: 4px 6px;
    padding-inline: calc(50vw - 50%);
    scroll-padding-inline: calc(50vw - 50%);
  }

  .m-car::-webkit-scrollbar,
  .sxc-cards::-webkit-scrollbar,
  .sv-liv::-webkit-scrollbar,
  .sv-plans::-webkit-scrollbar,
  #pricing-grid::-webkit-scrollbar,
    display: none;
  }

  .m-car > *,
  .sxc-cards > *,
  .sv-liv > *,
  .sv-plans > *,
  #pricing-grid > *,
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-width: 0;
  }

  /* Le survol souleve la carte de 6 px sur ordinateur. Au doigt il n'y a pas de
     survol : l'etat reste colle apres l'appui, et la carte paraissait alors
     decalee par rapport a ses voisines du carrousel. */
  .m-car > *:hover,
  .sxc-cards > *:hover,
  .sv-liv > *:hover,
  .sv-plans > *:hover,
  #pricing-grid > *:hover,
    transform: none;
    box-shadow: none;
  }

  /* Pastilles de progression, posees par assets/js/mobile.js. Elles disent
     combien de cartes il reste — le depassement seul ne le dit pas. */
  .m-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
  }

  .m-dots__d {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(34, 30, 26, .18);
    transition: width .28s cubic-bezier(.22, 1, .36, 1), background .28s;
  }

  .m-dots__d.is-on {
    width: 20px;
    border-radius: 3px;
    background: var(--red, #b41824);
  }

  /* Sur fond sombre les pastilles doivent s'inverser, sinon elles disparaissent. */
  .m-dots--dark .m-dots__d {
    background: rgba(255, 255, 255, .22);
  }

  .m-dots--dark .m-dots__d.is-on {
    background: #fff;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TELEPHONE — reglages transversaux
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Rythme vertical ────────────────────────────────────────────────────
     96 px de respiration entre deux sections se justifient sur un ecran de
     1 400 px de haut. Sur 844 px, c'est un quart d'ecran de vide a franchir
     entre chaque idee. */
  .hm-sec,
  .hm-cta {
    padding-block: 52px;
  }

  .hm-head {
    margin-bottom: 28px;
  }

  .hm-head__s {
    font-size: .93rem;
    line-height: 1.6;
  }

  /* ── Titres de section ──────────────────────────────────────────────────
     Les tailles fluides du site sont calees sur la largeur de fenetre (vw).
     Sous 400 px elles descendent trop bas pour rester des titres ; au-dessus
     de 600 elles remontent trop haut pour trois mots. On borne. */
  .hm-head__t {
    font-size: clamp(1.5rem, 6.4vw, 1.95rem);
    line-height: 1.15;
    text-wrap: balance;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. ACCUEIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero ───────────────────────────────────────────────────────────────
     `clamp(2.6rem, 7.2vw, 6.4rem)` bute sur son plancher des 361 px de large :
     le titre reste a 2,6 rem et « CRÉATION DE SITES INTERNET À ORLÉANS » sort
     sur quatre lignes en capitales, soit un tiers du premier ecran pour six
     mots. On repasse sur une echelle propre au telephone. */
  .hm-hero {
    padding-block: 104px 48px;
  }

  .hm-hero__title {
    font-size: clamp(2rem, 9.2vw, 2.75rem);
    line-height: 1.02;
    margin-top: 18px;
  }

  .hm-hero__sub {
    margin-top: 16px;
    font-size: .95rem;
    line-height: 1.6;
  }


  .hm-hero__actions {
    margin-top: 22px;
    gap: 10px;
  }


  /* ── Comparatif : deux colonnes, cote a cote ────────────────────────────
     C'est le bloc qui souffrait le plus de l'empilement : « sans site » et
     « avec site » se retrouvaient a deux ecrans d'ecart, donc plus rien a
     comparer. Cote a cote ils redeviennent lisibles d'un regard — au prix des
     sous-textes, que les intitules rendent de toute facon redondants
     (« Invisible sur Google » n'a pas besoin de glose). */
  .hm-cmp {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hm-cmp__col {
    padding: 16px 12px;
    border-radius: 18px;
  }

  .hm-cmp__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding-bottom: 13px;
    margin-bottom: 4px;
  }

  .hm-cmp__badge {
    width: 30px;
    height: 30px;
  }

  .hm-cmp__t {
    font-size: .88rem;
    line-height: 1.2;
  }

  .hm-cmp__s {
    display: none;
  }

  /* Les intitules des deux colonnes n'ont pas la meme longueur ; sans hauteur
     plancher, la 3e ligne de gauche se retrouve en face de la 4e de droite et
     le comparatif ne compare plus rien. */
  .hm-cmp__row {
    gap: 9px;
    padding-block: 11px;
    min-height: 62px;
    align-items: center;
  }

  .hm-cmp__row b {
    font-size: .8rem;
    line-height: 1.3;
  }

  /* Le sous-texte SEULEMENT. Un `.hm-cmp__row span` nu emporterait aussi le
     pictogramme et l'enveloppe du titre — la colonne se vidait entierement. */
  .hm-cmp__row > span:not(.hm-cmp__ico) > span {
    display: none;
  }

  .hm-cmp__ico svg {
    width: 16px;
    height: 16px;
  }

  /* ── Processus : lignes compactes ───────────────────────────────────────
     Trois cartes pleine largeur pour trois etapes de deux phrases, c'est
     1 000 px de haut. En lignes c'est 330 px, et l'enchainement 01 -> 02 -> 03
     se voit, ce qui est le propos.
     La route en vague, elle, s'arrete a 901px (home.css) : trois oscillations
     dans 300px de large ne se lisent plus comme un trajet. */
  .hm-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hm-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
  }

  .hm-step__n {
    top: 14px;
    right: 14px;
    font-size: .68rem;
  }

  .hm-step__ico {
    grid-row: 1 / span 3;
    width: 38px;
    height: 38px;
    margin-bottom: 0;
  }

  .hm-step__t {
    font-size: 1rem;
    align-self: center;
  }

  .hm-step__d {
    margin-top: 5px;
    font-size: .85rem;
    line-height: 1.5;
  }

  .hm-step__meta {
    margin-top: 9px;
    font-size: .75rem;
  }

  /* ── Appel final ────────────────────────────────────────────────────────*/
  .hm-cta__panel {
    padding: 38px 20px 34px;
    border-radius: 22px;
  }

  .hm-cta__t {
    font-size: clamp(1.5rem, 6.6vw, 2rem);
    line-height: 1.15;
  }

  .hm-cta__s {
    font-size: .92rem;
    line-height: 1.6;
  }

  .hm-cta__actions {
    margin-top: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PIED DE PAGE — trois colonnes de liens en une grille
   ───────────────────────────────────────────────────────────────────────────
   Empile, il ajoutait a lui seul un ecran et demi a CHAQUE page du site.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer {
    padding-block: 44px 26px;
  }

  .footer__inner {
    flex-direction: column;
    gap: 26px;
    padding-bottom: 24px;
  }

  .footer__brand {
    max-width: none;
  }

  .footer__brand p {
    font-size: .8rem;
  }

  .footer__social {
    margin-top: 12px;
  }

  .footer__social-link {
    width: 34px;
    height: 34px;
  }

  .footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    width: 100%;
  }

  .footer__col {
    gap: 7px;
  }

  .footer__col h4 {
    font-size: .74rem;
    margin-bottom: 2px;
  }

  .footer__col a {
    font-size: .82rem;
    line-height: 1.35;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. PAGES D'OFFRE — service-web, service-refonte, service-sur-mesure,
      reservation (prefixe `sv-`)
   ───────────────────────────────────────────────────────────────────────────
   La page /reservation faisait 11 700 px de haut : la plus longue du site, pour
   l'offre la plus chere. Le poids venait d'un seul bloc — « ce qui est livre »,
   cinq groupes de six lignes empiles, soit cinq ecrans avant le tarif.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── En-tete d'offre ────────────────────────────────────────────────────*/
  .sv-hero {
    padding: 96px 0 44px;
  }

  .sv-hero__inner {
    gap: 26px;
  }

  .sv-fil {
    margin-bottom: 14px;
    font-size: .76rem;
  }

  .sv-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.1;
    margin-bottom: 14px;
  }

  .sv-hero__lead {
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .sv-hero__pills {
    gap: 6px;
    margin-bottom: 20px;
  }

  .sv-pill {
    padding: 6px 10px;
    font-size: .76rem;
  }

  /* L'encadre du prix est le point d'arrivee de la page : il reste pleine
     largeur, mais resserre. */
  .sv-price {
    padding: 20px 18px;
    max-width: none;
  }

  .sv-price__amount b { font-size: 2.1rem; }
  .sv-price__note     { font-size: .8rem; margin-bottom: 14px; }
  .sv-price__facts    { padding-top: 14px; margin-bottom: 16px; gap: 9px; }
  .sv-price__facts li { font-size: .84rem; }

  /* ── Rythme des sections ────────────────────────────────────────────────*/
  .sv-sec {
    padding: 50px 0;
  }

  .sv-head {
    margin-bottom: 24px;
  }

  .sv-head h2 {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .sv-head p {
    font-size: .93rem;
    line-height: 1.6;
  }

  /* ── « A qui ca s'adresse » : lignes compactes ──────────────────────────
     Trois cas de figure de deux phrases chacun. En cartes pleine hauteur ils
     prenaient un ecran ; le numero passe a gauche du titre au lieu d'occuper
     une ligne a lui seul. */
  .sv-who {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sv-who__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px 18px;
  }

  .sv-who__num {
    font-size: 1.15rem;
    margin-bottom: 0;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 1px;
  }

  .sv-who__card h3 { font-size: .96rem; margin-bottom: 5px; }
  .sv-who__card p  { font-size: .86rem; line-height: 1.5; }

  /* ── « Ce qui est livre » : carrousel (voir §2) ─────────────────────────
     LE bloc qui rendait la page interminable. Chaque groupe reste integral —
     on ne coupe aucune ligne de livrable, ce serait retirer l'argument de
     vente — mais on les met cote a cote au lieu de bout a bout. */
  .sv-liv__group {
    padding: 20px 18px;
  }

  .sv-liv__icon     { width: 34px; height: 34px; margin-bottom: 12px; }
  .sv-liv__group h3 { font-size: .98rem; margin-bottom: 12px; }
  .sv-liv__list     { gap: 10px; }
  .sv-liv__list li  { font-size: .86rem; line-height: 1.5; }

  /* ── « Ce que ca change » ───────────────────────────────────────────────
     Reste empile : ce sont des arguments qui se lisent l'un apres l'autre, pas
     des elements a mettre en regard. On resserre seulement. */
  .sv-val {
    grid-template-columns: 1fr;
  }

  .sv-val__item {
    padding: 20px 18px;
  }

  .sv-val__k       { font-size: 1.5rem; margin-bottom: 8px; }
  .sv-val__item h3 { font-size: .98rem; margin-bottom: 6px; }
  .sv-val__item p  { font-size: .88rem; line-height: 1.55; }

  /* ── Deroule : 2 × 2 ────────────────────────────────────────────────────
     Quatre etapes courtes, chacune avec son delai. Empilees elles perdaient
     leur nature de suite ; en carre elles se lisent comme un calendrier. */
  .sv-etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }

  .sv-etape h3     { font-size: .93rem; margin-bottom: 6px; }
  .sv-etape p      { font-size: .82rem; line-height: 1.5; }
  .sv-etape__num   { font-size: .66rem; margin-bottom: 7px; }
  .sv-etape__delai { font-size: .7rem; margin-top: 9px; padding: 3px 7px; }

  /* ── Formules (page reservation) : carrousel (voir §2) ──────────────────*/
  .sv-plan {
    padding: 20px 18px 18px;
  }

  .sv-plan--feat    { padding-top: 18px; }
  .sv-plan__name    { font-size: 1.1rem; }
  .sv-plan__price   { font-size: 1.95rem; margin-top: 10px; }
  .sv-plan__mods li { font-size: .85rem; }
  .sv-plan__cta     { padding-top: 16px; }

  /* ── Copie d'ecran de l'application ─────────────────────────────────────
     La capture est la meilleure preuve de la page : elle reste intacte. Seule
     la legende se resserre. */
  .sv-shot figcaption {
    padding: 13px 16px 16px;
    font-size: .82rem;
    line-height: 1.55;
  }

  /* ── Questions ──────────────────────────────────────────────────────────*/
  .sv-faq summary {
    padding: 15px 34px 15px 0;
    font-size: .93rem;
    line-height: 1.35;
  }

  .sv-faq__a {
    padding: 0 10px 16px 0;
    font-size: .89rem;
    line-height: 1.6;
  }

  /* ── Les autres offres : cote a cote ────────────────────────────────────
     Deux renvois courts. Empiles ils ajoutaient un demi-ecran a la fin de
     chaque page d'offre, juste avant le pied de page. */
  .sv-autres {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .sv-autre {
    padding: 16px 14px 14px;
  }

  .sv-autre__k       { font-size: .64rem; letter-spacing: .1em; }
  .sv-autre h3       { font-size: .95rem; margin: 7px 0 6px; }
  .sv-autre p        { font-size: .82rem; line-height: 1.45; margin-bottom: 10px; }
  .sv-autre__go      { font-size: .8rem; }
  .sv-autre__go span { display: none; }

  /* ── Appel final ────────────────────────────────────────────────────────*/
  .sv-cta {
    padding: 48px 0;
  }

  .sv-cta h2 {
    font-size: clamp(1.45rem, 6.4vw, 1.95rem);
  }

  .sv-cta p {
    font-size: .93rem;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  .sv-cta__btns,
  .sv-cta__actions {
    flex-direction: column;
    gap: 10px;
  }

  .sv-cta__btns > *,
  .sv-cta__actions > * {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PAGE /services (prefixes `sx-` et `sxc-`)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .sx-hero-wrap     { padding-top: 96px; }
  .sx-hero h1       { font-size: clamp(1.8rem, 8.2vw, 2.4rem); margin-bottom: 12px; }
  .sx-hero__sub     { font-size: .96rem; line-height: 1.6; }
  .sx-hero__eyebrow { padding: 6px 16px; font-size: .66rem; margin-bottom: 16px; }

  /* Quatre chiffres sur deux lignes plutot qu'en colonne : ils sont faits pour
     etre lus ensemble. */
  .sx-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    margin-top: 30px;
  }

  .sx-stat        { min-width: 0; }
  .sx-stat__sep   { display: none; }
  .sx-stat__num   { font-size: 1.7rem; margin-bottom: 5px; }
  .sx-stat__label { font-size: .64rem; letter-spacing: .06em; }

  /* ── Les quatre offres : carrousel (voir §2) ────────────────────────────
     La feuille de la page dit elle-meme pourquoi les quatre cartes tiennent
     sur UNE rangee sur ordinateur : « on vient ici pour COMPARER ». Empilees
     sur telephone, elles perdaient exactement ce pour quoi on les avait mises
     en rangee. Le carrousel rend la comparaison au petit ecran. */
  .sxtab-section { padding: 44px 0 52px; }
  .sxtab-head    { margin-bottom: 22px; }
  .sxtab-head h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem); margin-bottom: 10px; }
  .sxtab-head p  { font-size: .92rem; line-height: 1.6; }

  .sxc-card__header   { height: 132px; }
  .sxc-card__num      { font-size: 2.4rem; top: 8px; right: 14px; }
  .sxc-card__body     { padding: 18px 18px 0; }
  .sxc-card__body h3  { font-size: 1.1rem; margin-bottom: 8px; }
  .sxc-card__desc     { font-size: .82rem; line-height: 1.5; }
  .sxc-card__for      { font-size: .74rem; margin-bottom: 12px; }
  .sxc-card__feats    { padding-top: 12px; gap: 7px; }
  .sxc-card__feats li { font-size: .8rem; }
  .sxc-card__foot     { padding: 14px 18px 18px; }

  /* ── « Inclus partout » : deux colonnes ─────────────────────────────────
     Six promesses courtes. En colonne unique elles occupaient un ecran et
     demi ; en deux colonnes, un demi-ecran. */
  .sx-included          { padding: 50px 0; }
  .sx-included__head    { margin-bottom: 26px; }
  .sx-included__head h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem); }
  .sx-included__head p  { font-size: .92rem; line-height: 1.6; }

  .sx-included__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sx-inc-item {
    padding: 16px 14px;
  }

  .sx-inc-item__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
  }

  .sx-inc-item__icon svg { width: 17px; height: 17px; }
  .sx-inc-item__title    { font-size: .88rem; line-height: 1.25; margin-bottom: 6px; align-items: flex-start; }
  .sx-inc-item__desc     { font-size: .78rem; line-height: 1.45; }

  /* ── Deroule en quatre etapes : 2 × 2 ───────────────────────────────────*/
  .sx-process          { padding: 50px 0 54px; }
  .sx-process__head    { margin-bottom: 26px; }
  .sx-process__head h2 { font-size: clamp(1.45rem, 6.2vw, 1.9rem); }
  .sx-process__head p  { font-size: .9rem; }

  .sx-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sx-step {
    padding: 16px 14px;
  }

  .sx-step__top   { margin-bottom: 12px; flex-wrap: wrap; gap: 6px; }
  .sx-step__num   { font-size: 1.5rem; }
  .sx-step__delay { font-size: .58rem; padding: 3px 7px; }
  .sx-step h4     { font-size: .92rem; margin-bottom: 6px; }
  .sx-step p      { font-size: .78rem; line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PAGES LEGALES — CGV, mentions, confidentialite
   ───────────────────────────────────────────────────────────────────────────
   Un texte legal est long par nature et il n'y a rien a y retrancher. Le gain
   se prend sur l'enveloppe : chaque rubrique reservait une ligne entiere a son
   pictogramme, au-dessus du titre. Quinze rubriques, c'est un ecran de
   telephone depense en decoration avant d'avoir lu une clause.

   Le pictogramme passe donc en habillage — le titre remonte a sa hauteur et le
   texte reprend la pleine largeur juste en dessous. Rien n'est masque.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .legal-container {
    margin-block: 24px;
    gap: 14px;
  }

  .legal-card {
    display: block;
    padding: 20px 18px;
    border-radius: 18px;
  }

  .legal-card__icon {
    float: left;
    width: 34px;
    height: 34px;
    margin: 2px 12px 6px 0;
  }

  .legal-card__icon svg {
    width: 17px;
    height: 17px;
  }

  /* Le titre occupe TOUTE la hauteur du pictogramme flottant. Sans ce plancher,
     un titre court le laisse depasser d'une ligne et c'est la premiere ligne du
     paragraphe qui vient se ranger a cote — un alinea fantome, au milieu d'un
     texte qui n'en a nulle part ailleurs. */
  .legal-card__content h2 {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: 9px;
  }

  .legal-card__content p {
    font-size: .89rem;
    line-height: 1.6;
  }

  .legal-card__content p + p {
    margin-top: 10px;
  }

  /* Le flottant doit etre purge : sans cela, une rubrique plus courte que son
     pictogramme laisse celui-ci depasser sur la rubrique suivante. */
  .legal-card::after {
    content: '';
    display: block;
    clear: both;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. EN-TETES DE PAGE ET BLOCS COMMUNS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section__head {
    margin-bottom: 22px;
  }

  .section__sub {
    font-size: .93rem;
    line-height: 1.6;
  }

  /* ── Foire aux questions ────────────────────────────────────────────────*/
  .faq__list  { gap: 8px; }
  .faq__trigger { padding: 15px 16px; font-size: .93rem; line-height: 1.35; }
  .faq__content { font-size: .88rem; line-height: 1.6; }

  /* ── Page contact ───────────────────────────────────────────────────────
     Les trois reperes (email, ville, delai) tiennent deja en une carte ; on
     resserre seulement pour que le formulaire remonte dans l'ecran. */
  .ct__head  { margin-bottom: 22px; }
  .ct__title { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.12; }
  .ct__lead  { font-size: .94rem; line-height: 1.6; }
  .ct__grid  { gap: 14px; }
  .ct-item   { padding-block: 13px; }
  .ct-item__k { font-size: .66rem; }
  .ct-item__v { font-size: .95rem; }
  .ct-item__note { font-size: .82rem; line-height: 1.45; }
}