/* Habillage du site de Tamis (index.html, mentions-legales.html).
   Aucune ressource externe : la police Geist (licence libre OFL) est servie depuis polices/.
   Un seul thème, clair, comme la fiche que le site montre. Partis pris : pas de blanc simple, pas de noir pur,
   pas de bleu, pas de couleur sur le texte, et pas de traits qui cloisonnent la page. D'où un fond sauge très pâle,
   une encre vert-noir, et des blocs arrondis plutôt que des lignes.
   Arrondis : 10 px pour les boutons, 18 px pour les cartes, 28 px pour les grands blocs, pastille pour les choix.
   Mouvement : seuls transform et opacity bougent ; si l'appareil demande moins d'animations, il ne reste que des fondus.
   Aucun style dans les pages elles-mêmes : la règle de sécurité du site (Content-Security-Policy) les refuserait. */
@font-face{font-family:"Geist";src:url("polices/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --fond:#eaefe8;--surface:#f6f8f3;--teinte:#d6e1d5;
  --texte:#17211b;--doux:#526058;--trait:#cfd8cd;
  --accent:#17211b;--sur-accent:#f6f8f3;
  --alerte-fond:#fff3e2;--alerte-trait:#c2610c;--alerte-texte:#7a3d05;
  --ombre:0 28px 60px -34px rgb(23 45 32 / .42);
  --rayon:18px;--rayon-petit:10px;--feuille:28px;
  --souple:cubic-bezier(.22,.8,.26,1);
  --police:"Geist","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 1.0625rem/1.6 var(--police);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--texte);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--texte);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

.cadre{max-width:1160px;margin:0 auto;padding:0 20px}
.evitement{position:absolute;left:12px;top:-60px;z-index:30;padding:10px 14px;background:var(--surface);border-radius:var(--rayon-petit)}
.evitement:focus{top:12px}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Repère invisible en haut de page : quand il sort de l'écran, le bandeau prend du relief (script.js). */
.sentinelle{position:absolute;top:0;left:0;width:1px;height:70px;pointer-events:none}

h1{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.03em;font-weight:650;text-wrap:balance}
h2{font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.15;letter-spacing:-.022em;font-weight:630;text-wrap:balance}
h3{font-size:1.06rem;line-height:1.35;font-weight:620}
.chapeau{margin-top:14px;color:var(--doux);max-width:62ch}

.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:var(--rayon-petit);background:var(--accent);color:var(--sur-accent);font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s var(--souple),opacity .15s ease}
.bouton:hover{opacity:.86}
.bouton:active{transform:translateY(1px) scale(.985)}
.bouton.grand{min-height:52px;padding:0 26px;font-size:1.04rem}
.lien-fort{font-weight:600}

/* Bandeau : une barre arrondie qui flotte, prend du relief quand on descend, et montre où l'on se trouve */
.entete{position:sticky;top:10px;z-index:20;margin-top:10px;padding:0 12px}
.entete-ligne{position:relative;display:flex;align-items:center;gap:18px;max-width:1136px;min-height:62px;margin:0 auto;padding:0 10px 0 20px;border-radius:var(--rayon);background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .3s ease,box-shadow .3s ease}
.entete.defile .entete-ligne{background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 16px 36px -20px rgb(23 45 32 / .45)}
.marque{display:inline-flex;align-items:center;gap:10px;margin-right:auto;font-weight:680;font-size:1.16rem;letter-spacing:-.02em;text-decoration:none}
.marque svg{width:26px;height:26px}
.liens{position:relative;display:flex;gap:2px}
.liens a{position:relative;padding:8px 14px;font-size:.96rem;font-weight:500;text-decoration:none;white-space:nowrap}
.liens a:hover{text-decoration:underline}
/* Le repère glisse sous le lien de la section affichée */
.repere{position:absolute;left:0;top:50%;height:36px;border-radius:var(--rayon-petit);background:var(--teinte);opacity:0;transform:translate(0,-50%);transition:transform .4s var(--souple),opacity .25s ease}
.repere.actif{opacity:1}
.menu{display:none}

/* Haut de page : le message à gauche, la vraie fiche à droite, posée sur une feuille */
.hero{padding:60px 0 84px;background:radial-gradient(52% 62% at 78% 46%,color-mix(in srgb,var(--teinte) 80%,transparent),transparent 72%)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:60px;align-items:center}
.accroche{margin-top:20px;font-size:1.16rem;color:var(--doux);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.pile{position:relative;width:520px}
.pile::before{content:"";position:absolute;inset:12px -14px -14px 14px;border-radius:var(--rayon);background:var(--teinte);transform:rotate(2.4deg)}
.apercu{position:relative;width:520px;height:500px;overflow:hidden;border-radius:var(--rayon);background:var(--surface);box-shadow:var(--ombre)}
/* La fiche d'exemple elle-même, réduite : 900 x 866 px ramenés à 520 x 500 */
.apercu iframe{display:block;width:900px;height:866px;border:0;transform:scale(.5778);transform-origin:0 0;pointer-events:none}
.apercu a{position:absolute;inset:0}
.legende{margin-top:22px;font-size:.88rem;color:var(--doux)}

section{padding:84px 0}
/* Grand bloc arrondi : il remplace les traits entre les sections */
.feuille{width:calc(100% - 24px);max-width:1376px;margin:0 auto;padding:76px 0;border-radius:var(--feuille);background:var(--surface)}
.pose{padding:14px 0}

/* Chiffres mesurés */
.mesure{padding:0 0 28px}
.panneau{padding:34px 38px 38px;border-radius:var(--rayon);background:var(--surface)}
.panneau h2{font-size:1rem;font-weight:560;letter-spacing:0;color:var(--doux)}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:22px}
.chiffres div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}
.chiffres dd{font-size:clamp(2.1rem,4vw,3rem);line-height:1;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.chiffres dt{color:var(--doux);font-size:.95rem;line-height:1.35}

/* Ce que vous recevez : deux cartes, une pour décider, une pour répondre */
.groupes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.groupe{padding:32px 34px 36px;border-radius:var(--rayon);background:var(--surface)}
.groupe.teinte{background:var(--teinte)}
.groupe h3{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--accent);color:var(--sur-accent);font-size:.86rem;font-weight:560}
.groupe dt{margin-top:24px;font-weight:620}
.groupe dd{margin-top:4px;color:var(--doux)}
.groupe.teinte dd{color:color-mix(in srgb,var(--texte) 78%,transparent)}

/* La preuve : un extrait de la fiche d'exemple, puis ce que cela garantit */
.preuve-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:44px}
.extrait{padding:30px 32px;border-radius:var(--rayon);background:var(--fond)}
.extrait h3{font-size:1.12rem}
.source{display:inline-block;margin-top:10px;padding:2px 10px;border-radius:6px;background:var(--surface);color:var(--doux);font-size:.84rem}
.extrait blockquote{margin-top:20px;padding-left:18px;border-left:3px solid var(--texte);font-size:1.14rem;line-height:1.5}
.extrait mark{background:var(--teinte);color:inherit;padding:1px 3px;border-radius:3px}
.alerte{margin-top:22px;padding:12px 14px;border-left:3px solid var(--alerte-trait);border-radius:6px;background:var(--alerte-fond);color:var(--alerte-texte);font-size:.93rem}
.extrait .legende{margin-top:16px}
.garanties{display:grid;gap:22px}
.garanties li{position:relative;padding-left:38px;color:var(--doux)}
/* Coche dessinée par deux bords, dans une pastille */
.garanties li::before{content:"";position:absolute;left:0;top:.1em;width:24px;height:24px;border-radius:50%;background:var(--teinte)}
.garanties li::after{content:"";position:absolute;left:8px;top:calc(.1em + 7px);width:8px;height:5px;border-left:2px solid var(--texte);border-bottom:2px solid var(--texte);transform:rotate(-45deg)}
.garanties b{color:var(--texte);font-weight:620}

/* Comment ça marche : trois pastilles numérotées, reliées par des pointillés */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;counter-reset:etape}
.etapes li{position:relative;counter-increment:etape}
.etapes li::before{content:counter(etape);display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-weight:650;font-size:1.1rem}
.etapes li:not(:last-child)::after{content:"";position:absolute;left:58px;right:-26px;top:21px;border-top:2px dotted var(--doux);opacity:.5}
.etapes p{margin-top:8px;color:var(--doux)}

/* Métiers : des pastilles à choisir, puis ce que l'outil regarde en plus */
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.puce{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--fond);font-size:.95rem;font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s var(--souple)}
.puce:hover{background:var(--teinte)}
.puce:active{transform:scale(.97)}
.puce[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent)}
.metier-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px}
.metier-detail h3{font-size:.95rem;color:var(--doux);font-weight:560}
.metier-detail ul{margin-top:10px;display:grid;gap:9px}
.metier-detail li{padding-left:16px;position:relative;font-size:.96rem;line-height:1.45}
.metier-detail li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:2px;background:var(--texte)}
.metier-aide{margin-top:28px;color:var(--doux);font-size:.93rem}

/* Votre rôle : quatre cartes */
.role{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.role div{padding:26px 28px;border-radius:var(--rayon);background:var(--surface)}
.role p{margin-top:6px;color:var(--doux)}

/* Tarifs : deux cartes de même forme, une ligne par cas, le prix toujours à droite */
.tarifs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.formule{display:flex;flex-direction:column;padding:32px;border-radius:var(--rayon);background:var(--fond)}
.formule.vedette{background:var(--teinte)}
.formule h3{font-size:1.3rem;letter-spacing:-.015em}
.formule p{margin-top:8px;color:var(--doux)}
.vedette p{color:color-mix(in srgb,var(--texte) 78%,transparent)}
.lignes{display:grid;gap:8px;margin-top:24px}
.lignes li{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:12px 18px;border-radius:var(--rayon-petit);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.lignes b{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.lignes small{display:block;margin-top:2px;color:var(--doux);font-size:.86rem}
.formule .conseil{margin-top:auto;padding-top:24px;color:var(--texte);font-weight:560}
.reperes{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px;margin-top:40px}
.reperes p{margin-top:6px;color:var(--doux)}
.suite{margin-top:32px}

/* Questions : des cartes repliées */
.questions{display:grid;gap:10px;max-width:820px;margin-top:36px}
details.q{border-radius:var(--rayon);background:var(--surface)}
details.q summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;font-weight:600;cursor:pointer;list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fond);font-weight:500;line-height:1;transition:transform .3s var(--souple)}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{padding:0 60px 24px 24px;color:var(--doux)}

/* Commande */
.commande .feuille{background:var(--teinte)}
.commande .chapeau{color:color-mix(in srgb,var(--texte) 80%,transparent)}
.commande .bouton{margin-top:30px}
.commande small{display:block;margin-top:16px;font-size:.92rem;color:color-mix(in srgb,var(--texte) 78%,transparent)}

footer{padding:28px 0 44px;color:var(--doux);font-size:.94rem}
.pied{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.pied .marque{margin:0 0 8px;font-size:1.05rem}

/* Page de commande : trois blocs (dossier, entreprise, paiement), puis le rappel des prix. Page de suivi. */
.commander{max-width:940px;padding-top:56px;padding-bottom:88px}
.commander h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.recap{max-width:560px;margin-top:48px}
.commander>.legende{margin-top:28px}
.commande-form{display:grid;gap:16px;margin-top:40px}
.bloc{padding:32px;border-radius:var(--rayon);background:var(--surface)}
.titre-bloc{display:flex;align-items:center;gap:14px;font-size:1.3rem}
.titre-bloc span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-size:1rem}
.aide{margin-top:8px;color:var(--doux)}
.depot{position:relative;display:grid;gap:4px;margin-top:22px;padding:22px 24px;border-radius:var(--rayon-petit);background:var(--teinte);cursor:pointer;transition:background .2s ease}
.depot:hover{background:color-mix(in srgb,var(--teinte) 82%,var(--texte))}
.depot:focus-within{outline:2px solid var(--texte);outline-offset:3px}
.choix-fichier{position:absolute;width:1px;height:1px;opacity:0}
.depot-titre{font-weight:620;overflow-wrap:anywhere}
.depot-aide{color:color-mix(in srgb,var(--texte) 75%,transparent);font-size:.94rem}
.devis{margin-top:18px}
.devis-attente{color:var(--doux)}
.devis-total{font-size:1.1rem}
.devis-documents{display:grid;gap:4px;margin-top:10px;font-size:.92rem}
.devis-documents li{display:flex;justify-content:space-between;gap:16px;padding:6px 12px;border-radius:8px;background:var(--fond)}
.devis-documents li span{flex:none;color:var(--doux)}
.devis-documents .ecarte{color:var(--doux)}
.devis-note{margin-top:10px;color:var(--doux);font-size:.92rem}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:22px}
.champs label{display:grid;gap:6px;align-content:start;font-weight:560;font-size:.96rem}
.champs .large{grid-column:1/-1}
.champs input,.champs select,.champs textarea{width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--trait);border-radius:var(--rayon-petit);background:var(--fond);color:var(--texte);font:inherit;font-weight:400}
.champs textarea{resize:vertical}
.champs :focus-visible{outline:2px solid var(--texte);outline-offset:1px}
.case{display:flex;gap:12px;align-items:flex-start;margin-top:22px;cursor:pointer}
.case input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent)}
.bloc .bouton{margin-top:20px}
.bouton:disabled{opacity:.38;cursor:not-allowed}
.bouton:disabled:active{transform:none}
.bouton.second{background:var(--teinte);color:var(--texte)}
.message{margin-top:18px;padding:14px 18px;border-radius:var(--rayon-petit);background:var(--alerte-fond);color:var(--alerte-texte);font-weight:560}
.suivi{display:grid;gap:8px;max-width:560px;margin-top:36px}
.suivi li{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--rayon-petit);background:var(--surface);color:var(--doux)}
.suivi li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--trait)}
.suivi .fait{color:var(--texte)}
.suivi .fait::before{content:"✓";display:grid;place-items:center;background:var(--accent);box-shadow:none;color:var(--sur-accent);font-size:.8rem;font-weight:700}
.suivi .encours{color:var(--texte);font-weight:600;background:var(--teinte)}
.suivi .encours::before{box-shadow:inset 0 0 0 2px var(--texte);animation:battement 1.4s ease-in-out infinite}
@keyframes battement{50%{opacity:.35}}
.resultat{margin-top:32px}
.tableurs{margin-top:16px;color:var(--doux)}

/* Abonnement et espace abonné */
.liens-simples{display:flex;gap:24px}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.option{position:relative;display:grid;gap:4px;padding:18px 20px 18px 52px;border-radius:var(--rayon-petit);background:var(--fond);cursor:pointer;transition:background .2s ease}
.option:hover{background:color-mix(in srgb,var(--fond) 80%,var(--teinte))}
.option:has(input:checked){background:var(--teinte)}
.option:focus-within{outline:2px solid var(--texte);outline-offset:3px}
.option input{position:absolute;left:20px;top:21px;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.option-titre{font-weight:620}
.option-prix{font-size:1.15rem;font-weight:650;letter-spacing:-.01em}
.option-aide{color:var(--doux);font-size:.92rem}
.conditions{display:grid;gap:6px;margin-top:22px;padding-left:18px;list-style:disc;color:var(--doux);font-size:.92rem}
.formulaire-court{max-width:560px;margin-top:32px}
.formulaire-court .champs{margin-top:0}
.forfait{margin-top:32px}
.forfait-titre{font-size:1.3rem;font-weight:650;letter-spacing:-.015em}
.jauge{height:10px;margin-top:14px;border-radius:5px;background:var(--fond);overflow:hidden}
.jauge span{display:block;width:0;height:100%;border-radius:5px;background:var(--accent);transition:width .6s var(--souple)}
.actions-compte{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.bloc .actions-compte .bouton{margin-top:0}
.titre-dossiers{margin-top:44px;font-size:1.3rem}
.dossiers{display:grid;gap:8px;margin-top:16px}
.dossiers li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:14px 18px;border-radius:var(--rayon-petit);background:var(--surface)}
.dossiers a{font-weight:600;overflow-wrap:anywhere}
.dossiers span{color:var(--doux)}
.dossiers .vide{color:var(--doux)}
.lien-bouton{padding:0;border:0;background:none;color:var(--texte);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Page des mentions légales */
.legal{max-width:780px;padding-top:56px;padding-bottom:80px}
.legal h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.legal h2{margin-top:44px;font-size:1.3rem}
.legal p,.legal ul{margin-top:12px}
.legal ul{padding-left:20px;list-style:disc}
.legal li{margin-top:6px}
.a-completer{padding:1px 6px;border-radius:4px;background:var(--alerte-fond);color:var(--alerte-texte);font-weight:600}

/* Mouvement. Pour tout le monde : des fondus, à l'entrée du haut de page puis à l'apparition des blocs (classe posée
   par script.js). Si l'appareil ne demande pas moins d'animations, un léger déplacement s'y ajoute.
   Beaucoup de postes demandent moins d'animations : sans les fondus, rien n'y bougerait. */
@keyframes parait{from{opacity:0}}
@keyframes monte{from{opacity:0;transform:translateY(16px)}}
.hero-texte>*,.pile,.hero .legende{animation:parait .7s ease backwards}
.hero-texte>:nth-child(2){animation-delay:.07s}
.hero-texte>:nth-child(3){animation-delay:.14s}
.pile{animation-delay:.2s}
.hero .legende{animation-delay:.3s}
.anime .reveal{opacity:0;transition:opacity .6s ease}
.anime .reveal.vu{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero-texte>*,.pile,.hero .legende{animation-name:monte;animation-timing-function:var(--souple)}
  .anime .reveal{transform:translateY(20px);transition:opacity .6s var(--souple),transform .6s var(--souple)}
  .anime .reveal.vu{transform:none}
}

/* Tablette : la fiche passe sous le message */
@media (max-width:1099px){
  .hero-grille{grid-template-columns:1fr;gap:48px}
  .metier-detail{grid-template-columns:1fr 1fr}
}
/* En dessous de 1 100 px, le menu complet (cinq liens et le bouton) ne tient plus sur une ligne : il se replie */
@media (max-width:1099px){
  .liens,.entete-ligne>.bouton{display:none}
  .menu{display:block}
  .menu summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--rayon-petit);background:var(--accent);color:var(--sur-accent);font-weight:600;cursor:pointer;list-style:none}
  .menu summary::-webkit-details-marker{display:none}
  .menu nav{position:absolute;left:0;right:0;top:calc(100% + 8px);display:grid;gap:2px;padding:10px;border-radius:var(--rayon);background:var(--surface);box-shadow:0 20px 44px -22px rgb(23 45 32 / .5)}
  .menu nav a:not(.bouton){padding:13px 14px;border-radius:var(--rayon-petit);font-weight:500;text-decoration:none}
  .menu nav a:not(.bouton):hover{background:var(--fond)}
  .menu nav .bouton{margin-top:8px}
}
@media (max-width:899px){
  section{padding:60px 0}
  .hero{padding:40px 0 60px}
  .groupes,.preuve-grille,.role,.tarifs,.reperes{grid-template-columns:1fr}
  .preuve-grille{gap:40px}
  .etapes{grid-template-columns:1fr;gap:34px}
  .etapes li:not(:last-child)::after{display:none}
  .chiffres{grid-template-columns:1fr 1fr;gap:28px 24px}
  .feuille{padding:52px 0}
  .pose{padding:10px 0}
}
/* Téléphone : la fiche d'exemple s'affiche à sa taille réelle, elle est faite pour */
@media (max-width:599px){
  body{font-size:1rem}
  .pile{width:100%}
  .pile::before{inset:10px -8px -10px 8px}
  .apercu{width:100%;height:440px}
  .apercu iframe{width:100%;height:440px;transform:none}
  .metier-detail{grid-template-columns:1fr}
  .panneau{padding:26px 24px 28px}
  .groupe,.formule,.role div,.bloc{padding:24px}
  .champs,.choix{grid-template-columns:1fr}
  .liens-simples{gap:14px;font-size:.92rem}
  .lignes li{padding:12px 14px;gap:12px}
  .lignes b{font-size:1.12rem}
  /* Sur téléphone, le prix de l'abonnement passe sous son libellé : côte à côte, le libellé se cassait en quatre lignes */
  .abonnement .lignes li{flex-direction:column;align-items:flex-start;gap:6px}
  .extrait{padding:24px 22px}
  details.q summary{padding:18px 20px}
  details.q p{padding:0 20px 22px}
}
/* Moins d'animations demandées : plus aucun déplacement, les fondus restent */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .repere{transition:opacity .25s ease}
  .bouton:active,.puce:active{transform:none}
  details.q summary::after{transition:none}
}
@media print{
  .entete,.pile,.commande,.menu{display:none}
  body{background:#fff;color:#000}
  .reveal{opacity:1 !important;transform:none !important}
}