@media (max-width:900px){
  /* T2 (15/09 soir) : plus de barre en haut sur telephone, une pastille Menu en bas */
  .page-int main{padding-top:0}
  /* ---------- audit du 16/09, P13 : le haut des pages interieures ----------
     Sous 900 px il n'y a plus de barre en haut : 61 px etaient encore reserves a un
     en-tete absent (111 px de vide avant « Le blog », 137 avant un article, 250 sur la
     404, 88 px de bleu sur les heros). On ramene tout au meme palier, qui laisse la
     place au logotype de 72 px (.lg-tel) sans laisser de vide. */
  .page-int main,body.page-int main{padding-top:0}
  .lx-tete.sv-bleu,.rv-tete,.r-tete,.co-tete,.b-hero{padding-top:64px}
  .lg-tete,.rs-tete{padding-top:64px}
  .bl-tete,.bl-tete.dedans{padding-top:64px}
  .ar,article.ar{padding-top:64px}
  .sh-tete{padding-top:56px}
  .pg-boutique .sh-tete{padding:26px 20px 5vh}
  html[data-mode="attente"] .sh-tete{padding-top:66px}
  /* La boutique porte un sous-menu colle en haut : on lui laisse la bande du logotype.
     16/09, fusion des chantiers : le logotype (.lg-tel, 41 px a y 6, ou y 46 en mode attente)
     et la barre de rayons (.snav, 48 px) se disputaient la meme bande. Le logotype garde sa
     bande, la barre de rayons commence dessous et se colle ensuite sous la bande d'attente.
     Bande du logotype : 44 px ; + 40 px de bande d'attente = 84 px. */
  /* 21/09 (Morgane) : plus de sous-menu ni de logotype sur telephone, la bande de 44 px restait blanche
     au-dessus du heros. On ne garde que la place de la bande « La boutique ouvre bientot » (40 px). */
  .pg-boutique.page-int main{padding-top:0}
  .pg-boutique .snav{top:0}
  html[data-mode="attente"] .pg-boutique.page-int main{padding-top:40px}
  html.co-sv[data-mode="attente"] .pg-compte.page-int main{padding-top:0}
  html[data-mode="attente"] .pg-boutique .snav{top:40px}
  /* ---------- P13 : le logotype, en haut a gauche, cliquable ----------
     Aujourd'hui on peut lire un article entier sans jamais voir la marque. */
  /* 21/09 (Morgane) : le logotype en haut a gauche est RETIRE sur telephone (la regle ci-dessous est gardee pour
     memoire : remettre display:block pour le faire revenir) */
  .lg-tel{position:absolute;top:6px;left:10px;z-index:45;display:none!important;width:92px;
    padding:12px 10px;color:#163b35;line-height:0;-webkit-tap-highlight-color:transparent}
  .lg-tel svg{width:100%;height:auto;display:block}
  .lg-tel:active{opacity:.6}
  /* 21/09 : le logotype ne descend que sous la bande « La boutique ouvre bientot », qui n'existe que sur
     la boutique (et pas dans l'espace d'un client service). Le mode attente est pose sur TOUT le site par
     le middleware : sans .pg-boutique, le logotype tombait sur le titre du service, des pages legales, du guide. */
  html[data-mode="attente"] .pg-boutique .lg-tel{top:46px}
  html[data-mode="attente"].co-sv .pg-compte .lg-tel{top:6px}
  /* ---------- transversal : le tiroir ---------- */
  .tiroir .tir-in{padding-bottom:90px}
  .pas .pas-m{font-size:13px}
  html[data-mode="attente"] .pg-boutique .tiroir .tir-in{padding-top:110px}
  html[data-mode="attente"] .pg-boutique header#hdr.h2{top:0}
  .lg-tete,.rs-tete{padding-left:20px;padding-right:20px;padding-bottom:5vh}
  html{scroll-padding-top:16px}
  /* T3 : les titres de la boutique respirent comme des titres */
  .pg-boutique h1,.pg-boutique h2,.pg-boutique h3{line-height:1.12}
  .pg-boutique .cq h2{line-height:1.15;text-wrap:pretty}
  .cr-t b,.st-l li b{line-height:1.25}
  /* T4 (decision de Vincent, 15/09 soir) : titres de chapitre CENTRES, le numero et la libellule
     sur une ligne, le libelle dessous sur une seule ligne */
  .chap,.r-sec .chap,.r-bande .chap,.t-sec .chap,.t-bande .chap,#chap1.jour .chap{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center!important;align-items:center;gap:0 8px;padding:0 16px 8px!important;text-align:center}
  .chap .ligne{display:contents}
  .chap .ligne .cnum,.chap .cnum{order:0;margin:0!important}
  .chap .clib{order:1;height:22px;margin:0!important}
  .chap .clab{order:2;flex:0 0 100%;text-align:center;margin:2px 0 0!important;white-space:nowrap;font-size:12px;letter-spacing:.16em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .r-pan .cta.cta-l{align-self:center}
  .mt-c{align-items:center;text-align:center}
  .mt-c .dl,.mt-c .cta{align-self:center;margin-left:auto;margin-right:auto}
  .mt-nom:after{left:50%;transform:translateX(-50%)}
  .mt-t{font-size:15.5px}.mt-d,.mt-c .dl{font-size:12px}
  /* T5 : le plancher typographique */
  .cta .sv{font-size:13.5px}
  .clab,.tt,.fq,.vprom,.lx-prix,.t-eti,.pc-cat,.bl-cat,.ar-suite a span,.r-eti,.mt,.fil-a,.ck,.qk,.prov,.pc-im i,.pc-prix .ap,.sh-gt,.mo .cm,.fila .fno span,.rev .prof,.r-avant,.t-tags li,.r-tags li{font-size:12px}
  .r-avant{letter-spacing:.14em}.t-tags li,.r-tags li{letter-spacing:.12em;padding:7px 12px}
  .leg,.fcomp,.flanc,.t-src,.soeur,.ttc,.cr-tot .ttc,.f-info ul.reass li,.pn-note,.ec-f label,.si-compo,.pc-court,.sh-barre,.bl-ch,.reassur .mini p,.reassur .t3 span,.rep-f,.faq-th .rep-f,.mini-f .lien-f,.st-sep,.t-resume span,.t-carte p:not([class]){font-size:13.5px}
  .reassur .mini p,.reassur .t3 span,.rep-f,.faq-th .rep-f,.bl-ch,.pc-court{font-size:15px}
  .st-sep{font-size:13px;padding:10px 0}
  .fc .fq,.sol .fq{font-size:12px!important}
  footer .tit,footer p.tit{font-size:11.5px}
  .t-tab th{font-size:11.5px}
  .t-tab-s summary,details.t-tab-s summary{font-size:13px}
  a.plus{font-size:12px}
  .rv-tete .prix{font-size:14px;letter-spacing:.06em;text-transform:none;max-width:30ch}
  .lx-tete.sv-bleu .lx-prix{font-size:13px;letter-spacing:.08em}
  .t-sec p:not([class]),.t-bande p:not([class]),#essais p:not([class]),#preuves p:not([class]){font-size:15.5px;line-height:1.65}
  .t-tab{font-size:12.5px}.t-src{font-size:12px}
  .r-sec p:not([class]),.r-pan p:not([class]),.r-fin p:not([class]),.r-bande p:not([class]),.r-volet p,.r-temp p{font-size:16.5px;line-height:1.7}
  .tra p{font-size:16px;line-height:1.65}
  #chap5 .cadre p{font-size:16.5px;line-height:1.65}
  .sous-h{font-size:17px}
  .main-f h1{font-size:clamp(34px,9.6vw,40px)}
  .ar-chapo{font-size:19px!important;line-height:1.45}
  .ar-meta{font-size:13px!important;line-height:1.5}
  .ar-fil{font-size:13px!important;padding:6px 0}
  /* T7 : cibles tactiles */
  header.h2 .burger{width:44px;height:44px;padding:11px 9px}
  .cr-q button{width:44px;height:44px}
  .pn-x{min-height:44px;padding:12px 0;font-size:11.5px}
  .pn-code button{min-height:48px;font-size:12px}
  .pn-z select{font-size:16px;min-height:48px}
  .ec-f input{font-size:16px}
  .ec-lien{font-size:14px;display:inline-block;padding:12px 0}
  .bl-rech input{font-size:16px}
  /* 21/09 (Morgane) : plus de rangee a faire defiler de cote, les categories vont a la ligne */
  .bl-cats{flex-wrap:wrap;justify-content:center;gap:8px;overflow:visible}
  .bl-cats button{padding:11px 13px;white-space:nowrap;flex:none;letter-spacing:.1em}
  .sh-tri select{padding:11px 14px;min-height:44px}
  .nuitp.bleup .pt{width:44px;height:44px;padding:6px}
  .ar-retour{display:inline-block;padding:10px 0}
  .fp-l input,.pn-cgv input{width:20px;height:20px}
  .tiroir .tl{min-height:44px}
  /* T8 : le sous-menu de la boutique */
  .pg-boutique .snav .in{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);scroll-behavior:auto}
  .pg-boutique .snav a{font-size:12px}
  /* T9 : le pied de page, variante A du labo (Vincent 15/09 soir) : deux colonnes serrees */
  footer#pied{margin-top:8vh}
  /* P13 : la pastille « Menu » ne recouvre plus le bas du pied.
     La pastille fait 52 px et se pose a 16 px du bas : 68 px occupes, plus 50 px d'air.
     16/09, fusion : sur les fiches produit la barre d'achat collante releve la pastille
     a 84 px du bas (_site.py), soit 68 px de plus ; le pied descend d'autant. Une seule
     valeur, ici : mk_pratiques ne la repose plus. */
  footer{padding:56px 0 calc(46px + 72px + env(safe-area-inset-bottom,0px))}
  body.f-colle-vu footer#pied{padding-bottom:calc(46px + 72px + 68px + env(safe-area-inset-bottom,0px))}
  body.pg-caisse footer#pied{padding-bottom:calc(46px + 72px + 84px + env(safe-area-inset-bottom,0px))}   /* 09/10 (audit 43) : sur le panier la pastille remonte au-dessus de la barre du bas */
  /* les lucioles restent dans la bande vide du haut (56 px) */
  footer .lucioles i:nth-child(1){top:14px!important}
  footer .lucioles i:nth-child(2){top:34px!important}
  footer .lucioles i:nth-child(3){top:20px!important}
  footer .lucioles i:nth-child(4){top:38px!important}
  footer .lucioles i:nth-child(5){top:26px!important}
  footer .grande-sig{font-size:30px;line-height:1.18;margin:0 auto 30px;max-width:100%;text-wrap:balance}
  footer .grande-sig br{display:none}
  footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0}
  footer .cols > div{margin:0 0 14px}
  footer .cols > div:first-child{grid-column:1/3;margin-bottom:18px;text-align:center}
  footer .cols > div:first-child .marque{width:120px;margin:0 auto 6px;padding:4px 0}
  footer .cols > div:first-child p{font-size:13.5px;line-height:1.4;margin:0}
  footer .cols p.tit,footer .cols .tit{font-size:11px;letter-spacing:.24em;margin:0 0 6px;line-height:1.4}
  footer .cols p{margin:0;font-size:14.5px;line-height:1.35}
  /* le <br> devient une espace (16/09 : « moustiquesde votre extérieur » quand il etait display:none) */
  footer .cols p br{display:none}
  footer .cols > div:first-child p br{content:"";display:inline}
  footer .cols > div:first-child p br::after{content:" "}
  footer .cols a{display:block;font-size:14.5px;line-height:1.35;padding:12.5px 0;margin:-22.5px 0 0;position:relative}
  footer .cols p > a:first-child{margin-top:-12.5px}
  footer .cols p > a:last-child{margin-bottom:-12.5px}
  footer .bas{margin-top:30px;padding-top:14px;font-size:12px;line-height:1.5}
  footer .bas span{display:block}
  footer .bas span+span{margin-top:6px}
  footer .bas a{display:inline-block;padding:13px 0;margin:-13px 0;text-underline-offset:4px}
  /* accueil : le heros (libellule, boutons), la journee, la bascule, les cartes, la bande photo */
  #libhero-f{width:64px}
  .hero-f .main-f{padding-bottom:0}
  .defile-band:before,.defile-band:after{width:28px}
  .carte{width:min(72vw,280px)}
  #chap2 .cadre,#chap5 .cadre{margin:0 12px;padding:18px 16px 16px}
  .pan{padding:6px 12px 22px}
  /* section 02 : un ecran, vraiment (Vincent 15/09) : numero et titre sur une ligne, textes serres */
  #chap2 .g3{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;margin:0 0 8px}
  #chap2 .g3 .gn{font-size:22px;line-height:1;opacity:.55;grid-row:1;grid-column:1}
  #chap2 .g3 b{font-size:19px;line-height:1.15;grid-row:1;grid-column:2;margin:0}
  #chap2 .g3 p{grid-column:2;margin:2px 0 0;font-size:14.5px;line-height:1.45}
  #chap2 .s1-fin{margin-top:12px;padding-top:12px}
  #chap2 .s1-fin .t{font-size:20px;margin-bottom:4px;display:block}
  #chap2 .s1-fin p{font-size:14.5px;line-height:1.45;margin:6px 0 0}
  #chap2 .eco-l{font-size:13px}
  /* la bascule (borne sur fond vert), variante C du labo sans bouton (Vincent 15/09 soir) :
     la phrase en haut, la borne au milieu, « Nous, un peu moins » et la reponse en bas */
  .basc{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(6vh + 20px) 20px calc(7vh + 90px);text-align:center}
  .basc .bt{display:contents}
  .basc .l1{order:1;font-size:clamp(30px,8.6vw,38px);max-width:none;text-align:center}
  .basc .borne-b{position:relative;left:auto;top:auto;transform:none;order:2;width:min(40vh,80vw);margin:0 auto;flex:none}
  .basc .l2{order:3;font-size:clamp(30px,8.6vw,38px);text-align:center;margin-top:0}
  .basc .apres-b{order:4;font-size:16px;text-align:center;margin:0}
  /* service : le tableau empile, la note des formules, les pastilles */
  .lx-ou{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin:0 0 14px}
  /* rendez-vous : la FAQ tient dans un ecran */
  .faq-rv{margin-top:10vh}
  .faq-rv h2,.faq-rv h2.h2t{font-size:clamp(26px,7vw,32px);white-space:normal!important;text-wrap:balance!important}
  .faq-rv .sous{font-size:14.5px;margin:0 0 10px}
  .faq-m summary{padding:11px 4px;font-size:15.5px;min-height:44px;align-items:center}
  .faq-m .rep-f{padding:0 4px 12px;font-size:14.5px;line-height:1.6}
  .faq-rv .faq-th{gap:6px}
  .faq-rv .faq-th h3{font-size:17px;margin:10px 0 2px}
  .faq-rv .faq-th h3 span{padding:2px 10px}
  .compare .c-act{display:flex;flex-direction:column;gap:10px}
  .compare .c-act > span:first-child{display:none}
  .compare .c-act .cta{width:100%;text-align:center}
  .conds-x{margin-top:26px;text-align:left}
  .wrapT1{margin-top:14px!important}
  /* 10/10/2026 : jamais de defilement de gauche a droite (un bouton trop long ne pousse plus la page) */
  html,body{overflow-x:clip}
  .cta{max-width:100%;white-space:normal;text-align:center}   /* 10/10/2026 (Morgane) : même écart sous le « 01 » que sous les autres numéros */
  .c-sous{font-size:16px}
  /* 01 la methode, condensee (16/09) : le fil clair entre les etapes vient d'un rang de
     sous-pixel entre les couches animees et les panneaux -> chevauchement d'un pixel et fond bleu ;
     le vent : degrade a 90deg (bords transparents) et efface avant la houle ; puis on resserre. */
  .wrapT1{background:#dcebf4;background-clip:padding-box}
  .wrapT1 .t-ciel + div,.wrapT1 .zoneau,.wrapT1 .t-bord + div,.wrapT1 .t-eau{margin-top:-1px}
  .wrapT1 .hcal{bottom:-1px}
  .wrapT1 .houle svg{width:calc(50% + 1px);margin-right:-1px}
  .souffle i{background:linear-gradient(90deg,transparent 18%,rgba(255,255,255,.7) 50%,transparent 82%)}
  .souffle{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,transparent 96%)}
  .wrapT1 .tra{padding:22px 18px 20px}
  .wrapT1 .tra.t-ciel{padding-top:24px}
  .wrapT1 .t-ciel .h2t{font-size:28px}
  .wrapT1 .houle{height:32px}
  .wrapT1 .tra p{font-size:15.5px;line-height:1.55;margin:0 0 10px}
  .wrapT1 .m-sas{font-size:14.5px;line-height:1.45;margin:6px 0 10px}
  .wrapT1 .t-ciel .rev{margin-top:12px!important}
  .wrapT1 .tra h2.et-t{font-size:21.5px;margin:4px 0 8px}
  .wrapT1 .fila{gap:8px;margin:0 0 8px;flex-wrap:nowrap;max-width:none}
  .wrapT1 .fila .fno{gap:5px}
  .wrapT1 .fila .fdot{width:7px;height:7px}
  .wrapT1 .fila .fno span{font-size:10px!important;letter-spacing:.14em}
  .wrapT1 .fila .ftrait{min-width:0;max-width:28px}
  .wrapT1 .t-bord .fila,.wrapT1 .t-eau .fila{display:none}
  .wrapT1 .t-eau p[style*="margin-top"]{margin-top:10px!important}
  /* technologie */
  .t-chiffres{grid-template-columns:1fr;gap:10px;text-align:left}
  .t-chiffres>div{display:grid;grid-template-columns:130px 1fr;align-items:baseline;gap:10px}
  .t-chiffres b{font-size:26px;white-space:nowrap;margin:0}
  .t-resume{grid-template-columns:1fr}
  .t-resume>*{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
  .t-actions{flex-direction:column;align-items:center}
  .t-actions .cta{width:min(100%,300px);text-align:center}
  /* marque */
  .r-sec{padding-top:8vh!important}
  /* blog */
  .ar-fin{display:flex;flex-direction:column;gap:10px}
  .ar-fin .cta{width:100%;margin:0;text-align:center}
  .bl-pied{display:none}
  /* boutique : heros, cartes, blocs, fiche */
  .sh-tete-b .sb-im{aspect-ratio:auto;height:240px;max-height:none;width:100%}
  .sh-tete-b .sh-actions .cta,.sh-ou .cta,.f-act .cta,.st-tx .cta,.cr .cta,.ec-f .cta,.rs .acts .cta{width:100%;white-space:normal;text-align:center}
  .f-act{flex-direction:column}
  /* 21/09 (Morgane) : une seule marge gauche-droite (24 px) pour tous les blocs de la boutique,
     et plus d'air entre les sections */
  .sh-ou.dedans-l{margin-left:0;margin-right:0;max-width:none}
  .sh-reass.dedans-l,.sh-cy.dedans-l,.sh-ou.dedans-l,.sh-preco.dedans-l{margin-top:96px}
  .sh-reass .sh-gt,.sh-reass h2,.sh-cy .sh-gt,.sh-cy h2,.sh-cy-ch{text-align:center}
  .sh-cy .diag-l{margin-top:40px}
  /* 21/09 (Morgane) : les fiches, l'aide, les kits : meme marge de 24 px que la grille de la boutique.
     Les questions avaient 40 px de marge + 40 px de retrait (colonne de 194 px), les videos collaient aux bords */
  .pg-boutique main .b-wrap{padding-left:24px!important;padding-right:24px!important}
  .pg-boutique .qr-cadre{margin-left:0!important;margin-right:0!important;padding:26px 20px!important}
  .pg-boutique .qr-cadre .faq-th{padding-left:0;padding-right:0}
  .pg-boutique .b-sec{padding-top:56px}
  .pg-boutique .assoc{margin-left:-24px!important;margin-right:-24px!important;padding-left:24px!important;padding-right:24px!important;scroll-padding-left:24px}
  /* le filtre de la boutique : tout affiche, sur plusieurs lignes, jamais de defilement */
  .sh-puces{flex-wrap:wrap!important;overflow:visible!important;margin:0!important;padding:0!important;gap:6px!important}
  .sh-puces button{padding:6px 10px!important;min-height:36px;font-size:13px!important}
  .sh-puces .sh-nb{margin-left:5px}
  /* 21/09 (Morgane) : le filtre sur deux lignes, colle en haut tant qu'on parcourt les produits
     (sticky dans sa section : il repart avec elle a la fin de la grille) */
  .pg-boutique .sh-cats{position:sticky!important;top:0;z-index:30;background:var(--casse,#fbfaf6);
    margin:0 -24px 14px!important;padding:10px 24px!important;box-shadow:0 6px 12px -10px rgba(22,59,53,.35)}
  html[data-mode="attente"] .pg-boutique .sh-cats{top:40px!important}
  /* les vignettes de la galerie des fiches : une seule rangee de quatre */
  .pg-boutique .gal .gs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;overflow:visible!important}
  .pg-boutique .gal .gs button{width:auto!important;height:auto!important;flex:none!important;aspect-ratio:1/1}
  /* la case « Vous ne savez pas quoi choisir ? » : le bouton ne deborde plus de la carte */
  .pc.pc-quiz{min-width:0}
  .pc-quiz .pq-in{align-items:stretch}
  .pc-quiz .pq-in{padding:22px 14px}
  .pc-quiz .cta{white-space:normal;width:100%;box-sizing:border-box;padding-left:8px;padding-right:8px;font-size:11.5px;letter-spacing:.05em;line-height:1.5;text-align:center}
  .as .tx > span{font-size:12px;opacity:.7}
  .as span.im,.as span.tx{opacity:1}
  /* la grille des produits (Vincent, 16/09) : DEUX cartes par rangee sur telephone, cartes
     compactes : photo, famille, nom, prix ; l'accroche ne se lit que sur la fiche */
  .sh-filtres.ouvert .sh-ft{margin-bottom:16px}
  .sh-grille{grid-template-columns:1fr 1fr;gap:14px 10px}
  .pc{border-radius:10px;min-width:0}
  .pc-im i{font-size:12px;letter-spacing:.1em;padding:5px 8px;left:8px;top:8px}
  .pc-cat{font-size:12px;letter-spacing:.1em;margin:10px 12px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-nom{font-size:16px;line-height:1.2;margin:0 12px 6px;overflow-wrap:anywhere}
  .pc-court{display:none}
  .pc-prix{flex-wrap:wrap;gap:4px 6px;margin:0 12px 12px}
  .pc-prix .ap{font-size:12px;letter-spacing:.08em}
  .pc-prix b{font-size:17px}
  h2.bt.bt-2{margin-top:34px}
  .serv-l + .preco-x{margin-top:28px}
  .note-r.dedans-l{margin-bottom:4vh}
  .cq:not(.vu){opacity:.55}
  .cq{padding-top:5vh}
  .gal .gs{display:flex;overflow-x:auto;gap:8px;-webkit-overflow-scrolling:touch}
  .gal .gs button{flex:0 0 64px;aspect-ratio:1/1}
  /* la fiche : le fil, le nom, l'accroche et le prix AVANT la galerie (bloquant de l'audit) */
  .f-haut{display:grid;grid-template-columns:1fr;gap:14px}
  .f-haut .f-info{display:contents}
  .f-haut .f-info > *{order:10}
  .f-haut .f-info > .fil-a{order:1;margin:0}
  .f-haut .f-info > h1{order:2;margin:0}
  .f-haut .f-info > .tag{order:3;margin:0}
  .f-haut .f-info > .f-note{order:3;margin:0}   /* les etoiles des avis (16/10/2026) sous l'accroche */
  .f-haut .f-info > .prix{order:4;margin:0}
  .f-haut .gal{order:5}
  /* rendez-vous : le formulaire, le contact */
  .carton-r .retour{position:static;display:block;text-align:left;margin:0 0 6px}
  .contact3{grid-template-columns:1fr;gap:8px}
  /* 16/09 : l'icone a gauche, la valeur puis le libelle empiles a droite (l'e-mail et « Ecrire sur WhatsApp » ne se coupaient pas proprement) */
  .ct{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:0;align-items:center;text-align:left;padding:8px 4px}
  .ct .ico{grid-row:1 / 3;width:48px;height:48px;padding:13px;margin:0}
  .ct .ct-b{grid-column:2;font-size:12px;margin-top:0;padding-top:0}
  .ct-v{grid-column:2;font-size:16.5px;white-space:nowrap;word-break:normal}
  .ct-mail .ct-v{font-size:15.5px}
  .faq-b{padding:40px 0 48px;margin-top:32px}
  .pg-aide #contact{padding:48px 0 0}
  .pg-aide #contact+.b-sec{padding-top:48px}
  /* resilier, mentions */
  .rs .acts{flex-direction:column-reverse}
  .rs .etapes{letter-spacing:.06em}
  .lg a{text-decoration:underline;text-underline-offset:3px}
}
@media (max-width:640px){
  /* le tableau service / boutique, empile : etiquette, cellule bleue, cellule jaune */
  .compare table{min-width:0;display:block}
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare tbody th,.compare td{display:block;width:auto!important;max-width:none!important;box-sizing:border-box}
  .compare tr{padding:10px 4px 12px;border-top:1px solid rgba(22,59,53,.12)}
  .compare tr:first-child{border-top:none}
  .compare tbody th{border:0;padding:4px 12px 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.65;font-weight:600}
  .compare td{border:0;padding:8px 12px;margin:4px 8px;border-radius:10px;font-size:14px}
  .compare td:nth-child(2){background:var(--bleu,#aacde2)}
  .compare td:nth-child(3){background:var(--jaune,#fff7cb)}
  .compare td::before{content:attr(data-col);display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
  .grande-sig br{display:none}
  .grande-sig{text-wrap:balance}
  .sh-prat{grid-template-columns:1fr}
  .si-petit .si{grid-template-columns:1fr}
  .si-petit .si-im{width:100%;aspect-ratio:16/9;min-height:0}
  .si-compo{font-size:13.5px}.si-voir{font-size:11.5px}
  .cr-l li{grid-template-columns:1fr auto}
  .cr-l li .cr-q{grid-column:2;grid-row:2;justify-self:end}
  .cr-l li .cr-t{grid-column:1;grid-row:1/3}
  .cr-l li .cr-p{grid-column:2;grid-row:1;text-align:right}
  .pn-plus-g{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .pn-plus-g>*{flex:0 0 78%;scroll-snap-align:start}
  .pn-vide .st-sep{display:block;margin-top:16px}
  /* 21/09 (Morgane) : une rangee qui defile en largeur ne doit JAMAIS bouger en hauteur sous le doigt
     (overflow-x:auto rend aussi overflow-y scrollable des qu'un contenu depasse de quelques px) */
  .moments,.etapv,.fcum,.r-duo,.assoc,.pn-plus-g{overflow-y:hidden!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .moments .mo.reveal{transform:none!important;opacity:1!important;transition:none!important}   /* pas d'apparition qui monte dans une rangee horizontale */
}