/* ══════════════════════════════════════════════════════════════════════════
   onfaitachetervotremaison.ca — feuille du site
   Palette et typographie officielles CENTURY 21 Canada, guide du 15 mai 2018.

   « N'utilisez aucune autre couleur que celles énumérées ci-dessus. »
   Or implacable PMS 2324 #BEAF87 · Gris poussé PMS Black 7 #252526 ·
   Blanc gagnant · Or foncé #A19276 · Gris léger #E6E7E8 · Gris moyen #808285

   CONSÉQUENCE D'ACCESSIBILITÉ. Aucune couleur claire de la palette ne passe
   4,5:1 sur blanc — l'or fait 2,17:1, le gris moyen 3,85:1. Le texte est donc
   TOUJOURS en gris poussé sur fond clair, et la hiérarchie se fait par la
   taille et la graisse, jamais par la couleur. Sur gris poussé, l'or atteint
   7,05:1 et le blanc 15,31:1 : les deux sont permis comme texte.

   Polices approuvées : Barlow Semi Condensed (titres), Oakes (corps), Arial en
   repli. Barlow n'étant pas disponible, tout le site est composé en Oakes, qui
   figure sur la même liste. Fichiers auto-hébergés, aucune requête externe.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Oakes";src:url("/assets/oakes-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes";src:url("/assets/oakes-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Oakes";src:url("/assets/oakes-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* palette officielle */
  --gris-pousse:#252526; --or:#BEAF87; --or-fonce:#A19276;
  --blanc:#FFFFFF; --gris-leger:#E6E7E8; --gris-moyen:#808285;

  /* noms hérités, remappés sur la palette officielle */
  --noir:#252526; --noir-80:#252526; --gris:#252526; --gris-clair:#252526;
  --os:#FFFFFF; --grege:#E6E7E8; --ligne:#E6E7E8; --gris-controle:#808285;
  --or-voile:#E6E7E8;
  /* l'accusé de réception et l'erreur sont fonctionnels, pas décoratifs :
     ils sortent de la palette de marque en connaissance de cause */
  --vert:#252526; --vert-voile:#E6E7E8; --rouge:#B02A1E;

  --titre:"Oakes","Barlow Semi Condensed",Arial,Helvetica,sans-serif;
  --corps:"Oakes",Arial,Helvetica,sans-serif;

  --r:2px; --r-lg:2px; --maxw:1180px;
  --ombre-s:0 1px 2px rgba(37,37,38,.06);
  --ombre-m:0 2px 6px rgba(37,37,38,.08),0 12px 30px rgba(37,37,38,.07);
  --ombre-l:0 4px 14px rgba(37,37,38,.10),0 26px 60px rgba(37,37,38,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--corps);color:var(--noir);background:var(--os);
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--titre);font-weight:700;line-height:1.13;letter-spacing:-.025em}
h1{font-size:clamp(2.05rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.3}
p{margin:0 0 1em}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.center{text-align:center}
section{padding:clamp(52px,7.5vw,92px) 0}
:focus-visible{outline:3px solid var(--gris-pousse);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:auto;display:inline-flex;align-items:center;min-height:44px}
.saut:focus{position:fixed;left:12px;top:12px;z-index:200;background:#000;color:#fff;padding:12px 18px;border-radius:6px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--titre);
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris);margin:0 0 16px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--or);border-radius:2px}
.center .eyebrow::before{display:none}
.lede{font-size:clamp(1.02rem,1.9vw,1.18rem);color:var(--noir-80);max-width:64ch}
.center .lede{margin-left:auto;margin-right:auto}

/* ══════════════ Page introuvable ══════════════ */
.page-404{min-height:calc(100vh - 74px);display:flex;align-items:center}
.erreur-hero{width:100%;padding:clamp(72px,12vw,150px) 0;background:var(--gris-pousse);color:var(--blanc);overflow:hidden}
.erreur-in{position:relative;max-width:780px}
.erreur-code{position:absolute;right:18px;top:50%;margin:0;transform:translateY(-53%);font-family:var(--titre);font-size:clamp(9rem,28vw,20rem);font-weight:700;line-height:.8;letter-spacing:-.09em;color:rgba(190,175,135,.18);pointer-events:none;user-select:none}
.erreur-in > :not(.erreur-code){position:relative;z-index:1}
.erreur-hero .eyebrow{color:var(--or)}
.erreur-hero h1{max-width:16ch;font-size:clamp(2.35rem,6vw,4.5rem)}
.erreur-hero .lede{max-width:55ch;margin-top:22px;color:var(--blanc)}
.erreur-hero .btn-fant{border-color:var(--blanc);color:var(--blanc)}
.erreur-hero .btn-fant:hover{background:rgba(255,255,255,.12)}
.erreur-aide{margin:28px 0 0;font-size:.95rem}
.erreur-aide a{color:var(--blanc);font-weight:700;text-underline-offset:3px}
@media(max-width:600px){.page-404{min-height:auto}.erreur-code{right:12px;top:22px;transform:none;font-size:10rem}.erreur-hero h1{max-width:13ch}.erreur-hero .hero-actions{position:relative;z-index:1}.erreur-hero .btn{width:100%}}

/* ══════════════ Boutons ══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--titre);font-weight:700;font-size:1.02rem;
  padding:16px 30px;border-radius:6px;border:0;cursor:pointer;text-decoration:none;
  line-height:1.2;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-or{background:var(--or);color:var(--gris-pousse);box-shadow:inset 0 0 0 1px rgba(37,37,38,.28)}
.btn-or:hover{background:var(--or-fonce);transform:translateY(-1px)}
.btn-noir{background:var(--noir);color:#fff}
.btn-noir:hover{background:var(--noir-80)}
.btn-fant{background:transparent;color:var(--gris-pousse);border:1.5px solid var(--gris-moyen)}
.btn-fant:hover{border-color:var(--gris-pousse);background:var(--gris-leger)}
.btn-block{width:100%}
.rassure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;
  font-size:.78rem;color:var(--gris);text-align:center;line-height:1.45}
.rassure svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--gris-pousse);fill:none;stroke-width:2}

/* ══════════════ En-tête et navigation ══════════════ */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
header.site.scrolled{border-bottom-color:var(--ligne);box-shadow:0 2px 14px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;height:74px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand-nom{font-family:var(--titre);font-weight:700;letter-spacing:-.03em;font-size:1rem;line-height:1.1}
.brand-nom small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.1em;
  color:var(--gris-clair);text-transform:uppercase;margin-top:3px}
.brand-sep{width:1px;height:32px;background:var(--ligne);flex:0 0 auto}
.c21{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.c21 img{height:28px;width:auto}
.c21-bar{width:4px;height:24px;background:var(--or);border-radius:1px;flex:0 0 auto}
.c21-txt{font-family:var(--titre);line-height:1.05}
.c21-txt b{display:block;font-size:.74rem;font-weight:700;letter-spacing:.11em}
.c21-txt span{display:block;font-size:.6rem;letter-spacing:.05em;color:var(--gris);margin-top:2px}

.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:.92rem;font-weight:600;padding:9px 12px;border-radius:6px;white-space:nowrap}
.menu a:hover{background:var(--gris-leger)}
.menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--or)}
.nav-actions{display:flex;align-items:center;gap:9px}
.langue{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:.82rem;
  font-weight:700;padding:8px 11px;border-radius:6px;border:1.5px solid var(--ligne);letter-spacing:.04em}
.langue:hover{border-color:var(--noir)}
.nav-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;
  font-size:.9rem;padding:9px 14px;border-radius:6px;border:1.5px solid var(--ligne);white-space:nowrap}
.nav-tel:hover{border-color:var(--noir)}
.nav .btn{padding:11px 20px;font-size:.9rem}
.burger{display:none;background:none;border:1.5px solid var(--ligne);border-radius:6px;
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--noir);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--noir)}
.burger span::before{top:-6px} .burger span::after{top:6px}

@media(max-width:1080px){ .brand-sep,.c21{display:none} }
/* Sous 560 px, la marque indépendante retombait sur quatre lignes et dépassait
   la hauteur de 74 px de la barre : la première ligne passait sous le bord haut
   de l'écran. On réduit la marque indépendante, jamais le mot-symbole C21 —
   le nom de l'agence doit rester prédominant (OACIQ). */
@media(max-width:560px){
  .brand{gap:10px}
  .brand-nom{font-size:.78rem;letter-spacing:-.02em}
  .brand-nom small{font-size:.5rem;letter-spacing:.07em;margin-top:2px}
  /* Le mot-symbole passe de 132 à 112 px pour rendre de la largeur au nom
     indépendant. Il reste nettement plus imposant que celui-ci : la
     prédominance du nom de l'agence est préservée. */
  .c21-signature .mot{width:112px}
  .c21-signature .dba{font-size:.66rem}
}
@media(max-width:960px){
  .burger{display:flex}
  .menu{position:absolute;left:0;right:0;top:74px;flex-direction:column;align-items:stretch;
    background:var(--os);border-bottom:1px solid var(--ligne);padding:10px 22px 18px;gap:2px;
    box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .menu[hidden]{display:none}
  .menu a{padding:13px 10px;font-size:1rem}
  .nav-tel span{display:none} .nav-tel{padding:10px 12px}
  .nav .btn{display:none}
}


/* ══════════════ Marque officielle ══════════════
   Le mot-symbole et le sceau sont deux éléments distincts. Le guide interdit
   de les faire voisiner : « Le sceau ne devrait pas paraître au-dessus du logo
   de raison sociale ni à côté de celui-ci. » Le mot-symbole vit donc dans
   l'en-tête et le pied de page, le sceau vit comme élément graphique ancré au
   bas des bandes sombres — jamais au milieu d'une page, comme le guide l'exige
   pour les versions recadrées. */

.c21-signature{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;text-decoration:none}
.c21-signature .mot{display:block;width:132px;color:var(--gris-pousse)}
.c21-signature .mot svg{width:100%;height:auto;display:block}
.c21-signature .dba{font-family:var(--titre);font-weight:700;font-size:.72rem;
  letter-spacing:.005em;color:var(--gris-pousse);line-height:1}
footer.site .c21-signature .mot{width:196px;color:var(--or)}
footer.site .c21-signature .dba{color:var(--or);font-size:.92rem;margin-top:2px}

/* Sceau recadré, ancré au bas de la bande. Débordement masqué : c'est le
   recadrage « vers le bas » prévu par le guide. */
.a-sceau{position:relative;overflow:hidden}
.a-sceau > .wrap{position:relative;z-index:1}
.sceau-fond{position:absolute;right:-2.5%;bottom:-34%;width:min(430px,44vw);
  color:var(--or);opacity:.22;pointer-events:none;z-index:0}
.sceau-fond svg{width:100%;height:auto;display:block}
@media(max-width:820px){ .sceau-fond{width:min(300px,62vw);bottom:-30%;right:-12%;opacity:.16} }

/* Filet or : la seule utilisation décorative permise de l'or sur fond clair,
   puisqu'un aplat de 2,17:1 ne peut jamais porter d'information. */
.filet-or{width:38px;height:3px;background:var(--or);display:block;margin-bottom:16px}

/* ══════════════ Héros ══════════════ */
.hero{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(50px,7vw,84px);
  background:var(--blanc)}
.hero h1 .l1,.hero h1 .l2,.hero h1 .l3{display:block}
/* Le filet or se peint en fond du mot, pas en pseudo-élément derrière la page :
   avec un fond blanc opaque, un z-index négatif disparaît sous le fond. */
.hero h1 .l3{display:inline-block;
  background:linear-gradient(var(--or),var(--or)) 0 86%/100% .14em no-repeat;
  padding-bottom:.06em}
.hero-sub{font-size:clamp(1.03rem,2vw,1.18rem);color:var(--noir-80);max-width:56ch;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.5vw,58px);align-items:start}
@media(max-width:980px){ .hero-grid{display:flex;flex-direction:column;gap:26px} }
/* Page de conversion, petits écrans : la carte de formulaire remonte juste
   sous le titre. Décision du 8 septembre. La colonne de texte est dissoute
   (display:contents) et ses blocs reçoivent un ordre ; le bloc de caution
   reste en bas. Le bureau ne change pas. */
@media(max-width:980px){
  body.a-barre .hero-grid > div:first-child{display:contents}
  body.a-barre .hero-grid > div:first-child > .eyebrow{order:1;margin-bottom:-12px}
  body.a-barre .hero-grid > div:first-child > h1{order:2}
  body.a-barre .hero-grid > .form-card{order:3;width:100%}
  body.a-barre .hero-grid > div:first-child > .hero-sub{order:4;margin-top:0}
  body.a-barre .hero-grid > div:first-child > .hero-points{order:5;margin-top:0}
  body.a-barre .hero-grid > div:first-child > .caution{order:6;margin-top:0}
}

.hero-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.hero-points li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:1rem}
.tick{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--or);
  display:grid;place-items:center;margin-top:1px}
.tick svg{width:13px;height:13px;stroke:var(--gris-pousse);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.caution{margin-top:30px;padding:16px 18px;background:var(--gris-leger);border:0;
  border-left:4px solid var(--gris-pousse);border-radius:0;display:flex;gap:14px;align-items:center;max-width:520px}
.caution .sceau{width:46px;height:46px;flex:0 0 auto;background:var(--gris-pousse);
  display:grid;place-items:center;overflow:hidden}
.caution .sceau svg{width:26px;height:auto;color:var(--or);display:block}
.caution .sceau span{font-family:var(--titre);font-size:.56rem;font-weight:700;color:var(--or);
  letter-spacing:.06em;text-align:center;line-height:1.15}
.caution p{margin:0;font-size:.87rem;color:var(--noir-80);line-height:1.5}
.caution b{font-family:var(--titre);letter-spacing:.02em}


/* ══════════════ Le sceau se pose — animation d'entrée du héros ══════════════
   Activée par le gabarit (classe .hero--vol posée par JS), donc absente sans
   JS et sous prefers-reduced-motion. Le sceau intégral, jamais recadré, part
   du centre de la colonne de texte — position que le guide autorise pour la
   version non recadrée — se trace, se remplit, puis vole jusqu'à la pastille
   du bloc de caution où il vit déjà. L'état final est la mise en page
   existante : rien n'est ajouté à la composition. Or sur gris poussé : la
   combinaison officielle, 7,05:1. */
.sceau-vol{position:absolute;z-index:3;pointer-events:none;border-radius:50%;
  display:grid;place-items:center;transform-origin:center;will-change:transform,opacity;
  animation:sceau-disque .32s cubic-bezier(.2,.7,.2,1) both}
.sceau-vol.derriere{z-index:0}
.hero--vol{overflow:hidden}
.hero--vol .hero-grid{position:relative;z-index:1}
.sceau-vol svg{width:100%;height:auto;display:block;color:var(--or);overflow:visible}
.sceau-vol path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:5;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:sceau-trace .62s .12s cubic-bezier(.4,0,.2,1) forwards,
            sceau-plein .38s .58s ease-out forwards}
.sceau-vol path:nth-child(4),.sceau-vol path:nth-child(5){stroke-width:1.5}
.sceau-vol.part{transition:transform .68s cubic-bezier(.55,0,.15,1),opacity .5s .2s}
.sceau-vol.part.fuit{opacity:0}
.sceau-vol.pose{animation:sceau-pose .55s ease-out both}
.hero--vol .caution .sceau.attend{visibility:hidden}
.hero--vol .caution .sceau.pose{animation:sceau-onde .7s ease-out both}
.hero--vol h1 .l1,.hero--vol h1 .l2,.hero--vol h1 .l3{opacity:0;transform:translateY(10px);
  animation:sceau-mot .5s cubic-bezier(.2,.7,.2,1) forwards}
.hero--vol h1 .l1{animation-delay:.3s}
.hero--vol h1 .l2{animation-delay:.55s}
.hero--vol h1 .l3{animation-delay:.8s}
@keyframes sceau-disque{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes sceau-trace{to{stroke-dashoffset:0}}
@keyframes sceau-plein{to{fill-opacity:1}}
@keyframes sceau-mot{to{opacity:1;transform:none}}
@keyframes sceau-onde{from{box-shadow:0 0 0 0 rgba(190,175,135,.95)}to{box-shadow:0 0 0 16px rgba(190,175,135,0)}}

/* ══════════════ Bande noire ══════════════ */
.strip{background:var(--noir);color:#fff;padding:20px 0}
.strip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px;align-items:center;
  font-size:.87rem;font-weight:600;color:#E6E7E8}
.strip-in b{color:#fff;font-weight:700;font-family:var(--titre)}
.strip-item{display:flex;align-items:center;gap:9px}
.strip-item svg{width:17px;height:17px;stroke:var(--or);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ══════════════ Blocs de contenu ══════════════ */
.sec-blanc{background:var(--blanc)}
.sec-os{background:var(--os)}
.sec-grege{background:var(--grege)}
.head{max-width:66ch;margin-bottom:clamp(32px,4.5vw,50px)}
.head.center{margin-left:auto;margin-right:auto}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.card{background:var(--os);border:1px solid var(--ligne);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--ombre-s);transition:transform .18s,box-shadow .18s}
.sec-os .card,.sec-grege .card{background:var(--blanc)}
.card:hover{transform:translateY(-3px);box-shadow:var(--ombre-m)}
.card-ico{width:44px;height:44px;border-radius:8px;background:var(--noir);display:grid;place-items:center;margin-bottom:16px}
.card-ico svg{width:22px;height:22px;stroke:var(--or);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:9px}
.card p{margin:0;color:var(--noir-80);font-size:.95rem}
a.card{text-decoration:none;display:block}
a.card .suite{display:inline-block;margin-top:12px;font-weight:700;font-size:.9rem;
  border-bottom:2px solid var(--or);padding-bottom:1px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:26px;counter-reset:s}
.stepbox::before{counter-increment:s;content:counter(s);display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;background:var(--noir);color:var(--or);
  font-family:var(--titre);font-weight:700;font-size:1.15rem;margin-bottom:16px}
.stepbox h3{margin-bottom:8px}
.stepbox p{margin:0;color:var(--noir-80);font-size:.95rem}

/* Personne */
.pers{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:26px;box-shadow:var(--ombre-s);display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:start}
@media(max-width:620px){ .pers{grid-template-columns:1fr} }
.pers .photo{width:110px;height:110px;border-radius:50%;overflow:hidden;background:var(--grege);
  border:3px solid var(--or);display:grid;place-items:center}
.pers .photo img{width:100%;height:100%;object-fit:cover}
.pers .photo .ph{font-family:var(--titre);font-size:.58rem;font-weight:700;color:var(--gris);
  letter-spacing:.05em;text-align:center;line-height:1.25}
.pers h3,.pers .pers-nom{margin-bottom:3px}
/* Nom de personne : H2 pour l'ordre des titres, taille d'un H3 pour la mise en page. */
.pers .pers-nom{font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.3}
.pers .titre{font-size:.85rem;color:var(--gris);margin-bottom:12px;font-weight:600}
.pers p{margin:0 0 .8em;font-size:.96rem;color:var(--noir-80)}

.aremplacer{display:inline-block;background:var(--gris-leger);border:1px dashed var(--or-fonce);
  border-radius:6px;padding:9px 14px;font-size:.84rem;font-weight:600;color:var(--noir-80)}

/* Liste de liens en colonnes — guides, secteurs */
.liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:12px}
/* Les cartes d'une même rangée doivent finir à la même hauteur : sans ça,
   un libellé de deux lignes décale visuellement toute la rangée. */
.liste li{display:flex}
.liste a{flex:1;min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;font-weight:600;font-size:.97rem;transition:border-color .15s,transform .15s}
.liste a:hover{border-color:var(--noir);transform:translateY(-2px)}
.liste .fleche{flex:0 0 auto;font-weight:700}
.liste .bientot{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);background:var(--grege);border-radius:99px;padding:4px 10px;white-space:nowrap}

/* Article de contenu */
.article{max-width:72ch}
.article h2{margin:38px 0 12px}
.article h3{margin:26px 0 8px}
.article ul,.article ol{margin:0 0 1em;padding-left:24px}
.article li{margin-bottom:6px}
/* « .article.note » — les deux classes sur le même élément — existe dans le
   contenu depuis le début. Le sélecteur descendant seul ne l'attrapait pas et
   l'encadré sortait sans fond. Les deux formes sont couvertes ici. */
.article .note,.article.note{background:var(--grege);border-radius:var(--r);
  padding:18px 20px;font-size:.95rem;margin:30px 0}
.article .note p:last-child,.article.note p:last-child{margin-bottom:0}
/* Titre de groupe au-dessus d'une liste de liens : plus petit que le H2
   courant, pour ne pas concurrencer le H1 de la page d'index. */
h2.groupe{margin:46px 0 16px;font-size:clamp(1.22rem,2.2vw,1.55rem)}
h2.groupe:first-of-type{margin-top:10px}

/* ══════════════ Guides — sommaire, encart, suite ══════════════ */

/* Sommaire ancré. Sans JavaScript : ce sont des ancres, et Google s'en sert
   pour proposer des liens de saut dans ses résultats. */
.sommaire{max-width:72ch;margin:0 0 38px;padding:20px 22px;background:var(--gris-leger);
  border-left:3px solid var(--or);border-radius:var(--r)}
.sommaire p{font-family:var(--titre);font-weight:700;font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 12px}
.sommaire ol{margin:0;padding-left:20px;font-size:.95rem}
.sommaire li{margin:0}
.sommaire li + li{border-top:1px solid rgba(37,37,38,.10)}
/* Une entrée de sommaire est une cible de navigation autonome, pas un lien en
   pleine phrase : elle doit faire 44 px de haut au doigt. Le remplissage
   vertical fait le travail, y compris sur les entrées d'une seule ligne. */
.sommaire a{display:block;min-height:44px;padding:9px 0;text-decoration:none;
  transition:color .18s,text-decoration-color .18s;
  text-decoration-line:underline;text-decoration-color:transparent;text-underline-offset:3px}
.sommaire a:hover,.sommaire a:focus-visible{text-decoration-color:var(--or)}
/* L'ancre ne doit pas glisser sous l'en-tête collant de 74 px. */
.article h2[id]{scroll-margin-top:92px}

/* Encart de conversion au milieu du guide. La personne est le call-to-action :
   le visage colle au bouton, jamais au décor. */
.encart{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center;
  margin:44px 0;padding:24px 26px;background:var(--gris-pousse);color:#fff;border-radius:var(--r)}
/* Gris léger plutôt que gris moyen : le substitut « PHOTO À VENIR » doit être
   lisible tant que la vraie photo n'est pas livrée. Blanc sur gris moyen ne
   fait que 3,5:1 ; gris poussé sur gris léger en fait 13,6. */
.encart-photo{display:block;width:132px;height:132px;border-radius:50%;overflow:hidden;
  background:var(--gris-leger);flex:0 0 auto}
.encart-photo img{width:100%;height:100%;object-fit:cover}
.encart-photo .ph{width:100%;height:100%;place-items:center;text-align:center;
  font-family:var(--titre);font-weight:700;font-size:.68rem;letter-spacing:.09em;
  color:var(--gris-pousse)}
.encart-txt p{color:#E6E7E8;margin:0 0 14px;font-size:.97rem}
.encart-nom{font-family:var(--titre);font-weight:700;font-size:1.12rem;color:#fff!important;
  line-height:1.2;margin-bottom:12px!important}
.encart-nom small{display:block;font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--or);margin-top:4px}
.encart .btn-or{margin-bottom:10px}
.encart .rassure-txt{font-size:.8rem;color:#E6E7E8;margin:0}
@media(max-width:640px){
  .encart{grid-template-columns:1fr;text-align:center;justify-items:center;gap:18px;padding:26px 20px}
  .encart-photo{width:104px;height:104px}
  .encart .btn{display:block;width:100%}
}

/* « À lire ensuite » : ce sont des cibles de navigation, pas du texte courant.
   Elles reprennent la carte de .liste — 44 px de haut au minimum. */
.suite{margin-top:34px}
.suite h2{font-size:clamp(1.15rem,2vw,1.4rem);margin-bottom:14px}
/* Citation d'une disposition législative. Filet or à gauche : l'or reste
   décoratif, le texte demeure en gris poussé — 15,31:1 sur blanc. */
.article blockquote{margin:22px 0;padding:2px 0 2px 20px;border-left:3px solid var(--or)}
.article blockquote p{margin:0;font-size:.97rem}
.article > ul:last-child,.article > ol:last-child{margin-bottom:0}

/* FAQ */
.faq{max-width:820px}
details.q{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
details.q summary{cursor:pointer;list-style:none;padding:19px 52px 19px 22px;font-family:var(--titre);
  font-weight:700;font-size:1rem;position:relative;line-height:1.4}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--noir);border-bottom:2.4px solid var(--noir);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
details.q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.q .a{padding:0 22px 20px;color:var(--noir-80);font-size:.95rem}
details.q .a p:last-child{margin-bottom:0}

/* CTA final */
.cta{background:var(--noir);color:#fff;position:relative;overflow:hidden}
/* le sceau tient lieu d'élément artistique : voir .sceau-fond */
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff;max-width:18ch;margin-bottom:16px}
.cta h2 .or{color:var(--or)}       /* or sur noir : 10:1, autorisé */
.cta p{color:#E6E7E8;max-width:52ch}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
@media(max-width:820px){ .cta-grid{grid-template-columns:1fr;gap:26px} }
.cta-actions{display:flex;flex-direction:column;gap:12px;min-width:266px}
.cta-actions .btn-fant{color:#fff;border-color:rgba(255,255,255,.3)}
.cta-actions .btn-fant:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* Fil d'Ariane */
.ariane{font-size:.83rem;color:var(--gris);padding:18px 0 0}
.ariane a{text-decoration:none}
.ariane a:hover{text-decoration:underline}

/* ══════════════ Pied de page ══════════════ */
footer.site{background:var(--gris-pousse);color:#C9CACB;padding:52px 0 36px;font-size:.86rem;border-top:3px solid var(--or)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:32px}
@media(max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr;gap:24px} }
footer.site h2{color:#fff;font-family:var(--titre);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px}
footer.site a{color:#9A9A9A;text-decoration:none}
footer.site a:hover{color:var(--or);text-decoration:underline}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-c21{margin-bottom:16px}

.foot-c21 b{color:#fff;font-family:var(--titre);font-size:1rem;letter-spacing:.04em;display:block}
.foot-c21 span{font-size:.8rem}
.legal{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:.78rem;line-height:1.66;color:#AFB0B1}
.legal p{margin:0 0 9px}

/* ══════════════ Formulaire de la page de conversion ══════════════ */
.form-card{background:var(--blanc);border-radius:var(--r-lg);box-shadow:var(--ombre-l);
  border:1px solid var(--ligne);overflow:hidden;position:sticky;top:20px}
@media(max-width:980px){ .form-card{position:static} }
.courtier{display:flex;gap:14px;align-items:center;padding:18px 24px;background:var(--noir);color:#fff}
.courtier .photo{width:56px;height:56px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:#333;border:2px solid var(--or);display:grid;place-items:center}
.courtier .photo img{width:100%;height:100%;object-fit:cover}
.courtier .photo .ph{font-family:var(--titre);font-size:.55rem;font-weight:700;color:var(--or);
  letter-spacing:.05em;text-align:center;line-height:1.2}
.courtier .qui b{display:block;font-family:var(--titre);font-size:.97rem}
.courtier .qui small{display:block;font-size:.74rem;color:#E6E7E8;margin-top:1px}
.courtier .qui em{display:block;font-style:normal;font-size:.83rem;color:var(--or);margin-top:5px;line-height:1.4}
.form-head{padding:20px 24px 16px;background:var(--noir-80);color:#fff}
.form-head h2{font-family:var(--titre);font-size:1.2rem;color:#fff}
.form-head p{margin:6px 0 0;font-size:.87rem;color:#E6E7E8;line-height:1.5}
.progress{display:flex;gap:6px;margin-top:15px}
.progress i{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.2);transition:background .3s}
.progress i.on{background:var(--or)}
.form-body{padding:22px 24px 24px}
.step{display:none;animation:fade .26s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-label{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris-clair);margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:6px}
.field .hint{font-weight:500;color:var(--gris-clair);font-size:.79rem}
.field input,.field select{width:100%;font-family:var(--corps);font-size:1rem;padding:13px 14px;
  border-radius:2px;border:1.5px solid var(--gris-moyen);background:#FDFCFA;color:var(--noir);
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.field input:focus,.field select:focus{outline:none;border-color:var(--gris-pousse);box-shadow:0 0 0 3px var(--or)}
.field input.err,.field select.err{border-color:var(--rouge);background:#FDF6F5}
.err-msg{display:none;color:var(--rouge);font-size:.79rem;font-weight:600;margin-top:5px}
.err-msg.show{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){ .row2{grid-template-columns:1fr} }
.choices{display:grid;gap:9px}
.choice{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--gris-moyen);
  border-radius:2px;cursor:pointer;background:#FDFCFA;transition:all .14s;font-weight:600;font-size:.96rem}
.choice:hover{border-color:var(--or);background:#fff}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--gris-controle);
  display:grid;place-items:center;transition:all .14s}
.choice .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--noir);
  transform:scale(0);transition:transform .14s}
.choice.sel{border-color:var(--gris-pousse);background:var(--gris-leger);box-shadow:inset 4px 0 0 var(--or)}
.choice.sel .dot{border-color:var(--noir)}
.choice.sel .dot::after{transform:scale(1)}
.form-nav{margin-top:18px}
.form-nav .btn{padding:15px 22px}
.btn-back{background:none;border:0;color:var(--gris);font-family:var(--corps);font-weight:600;
  font-size:.88rem;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:3px}
.btn-back:hover{color:var(--noir)}
.consent{display:flex;gap:10px;align-items:flex-start}
.consent input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--noir)}
.consent label{font-size:.78rem;color:var(--gris);line-height:1.5;font-weight:500}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.success{display:none;padding:38px 26px;text-align:center}
.success.on{display:block}
.success-ico{width:64px;height:64px;border-radius:50%;background:var(--or);
  display:grid;place-items:center;margin:0 auto 18px}
.success-ico svg{width:32px;height:32px;stroke:var(--gris-pousse);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success h3{margin-bottom:10px}
.success p{color:var(--noir-80);font-size:.96rem}

/* Barre collante mobile — page de conversion seulement */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--ligne);box-shadow:0 -4px 20px rgba(0,0,0,.1)}
.stickybar .btn{flex:1;padding:14px 12px;font-size:.94rem}
.stickybar .btn-fant{flex:0 0 auto;padding:14px 18px}
@media(max-width:980px){ .stickybar{display:flex} body.a-barre{padding-bottom:78px} }

/* ══════════════ Bandeau de témoins ══════════════ */
.tm,.tm *{box-sizing:border-box}
.tm{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--blanc);
  border-top:3px solid var(--or);box-shadow:0 -6px 34px rgba(0,0,0,.18);
  font-family:var(--corps);color:var(--noir-80);max-height:78vh;overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);animation:tm-monte .28s ease-out}
@keyframes tm-monte{from{transform:translateY(100%)}to{transform:none}}
.tm[hidden]{display:none}
.tm-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:20px 22px;
  display:grid;grid-template-columns:1fr auto;gap:20px 32px;align-items:start}
.tm h2{font-family:var(--titre);font-size:1.06rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;margin:0 0 7px;color:var(--noir)}
.tm h2:focus,.tm h2:focus-visible{outline:none}
.tm p{margin:0 0 10px;font-size:.9rem;line-height:1.55;max-width:74ch}
.tm p:last-child{margin-bottom:0}
.tm-liens{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:.85rem}
.tm-liens a,.tm-lien{color:var(--noir);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:.85rem}
.tm-btns{display:flex;gap:10px;align-self:start;margin-top:4px}
.tm-btn{font-family:var(--titre);font-weight:700;font-size:.97rem;line-height:1.2;
  padding:14px 26px;min-width:138px;border-radius:6px;border:0;cursor:pointer;
  transition:transform .15s ease,background .15s ease}
.tm-btn:hover{transform:translateY(-1px)}
.tm-accepter{background:var(--or);color:#000}
.tm-accepter:hover{background:var(--or-fonce)}
.tm-refuser{background:#000;color:#fff}
.tm-refuser:hover{background:var(--noir-80)}
.tm-noir{background:#000;color:#fff;min-width:0;padding:12px 22px;font-size:.9rem}
.tm-panneau{margin-top:14px;border-top:1px solid var(--ligne);padding-top:14px;display:grid;gap:12px}
.tm-panneau[hidden]{display:none}
.tm-cat{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  background:var(--os);border:1px solid var(--ligne);border-radius:10px;padding:14px 16px}
.tm-cat-txt b{display:block;font-size:.9rem;color:var(--noir);margin-bottom:4px}
.tm-cat-txt span{display:block;font-size:.83rem;line-height:1.5;color:var(--gris)}
.tm-fixe{flex:0 0 auto;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-pousse);background:var(--or);border-radius:99px;padding:6px 12px;white-space:nowrap}
.tm-bascule{flex:0 0 auto;display:flex;align-items:center;gap:10px;cursor:pointer}
.tm-bascule input{position:absolute;opacity:0;width:0;height:0}
.tm-piste{width:46px;height:26px;border-radius:99px;background:var(--gris-controle);
  position:relative;transition:background .16s;flex:0 0 auto}
.tm-piste::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tm-bascule input:checked + .tm-piste{background:var(--gris-pousse)}
.tm-bascule input:checked + .tm-piste::after{transform:translateX(20px)}
.tm-bascule input:focus-visible + .tm-piste{outline:3px solid var(--or);outline-offset:2px}
.tm-etat{font-size:.79rem;font-weight:700;color:var(--gris);min-width:66px}
.tm-note{font-size:.79rem;color:var(--gris);line-height:1.5;margin:0}
.tm-enr{display:flex;justify-content:flex-end}
body.tm-ouvert .stickybar{display:none}
@media(max-width:980px){ body.tm-ouvert{padding-bottom:0} }
@media(max-width:820px){
  .tm-in{grid-template-columns:1fr;gap:16px;padding:18px}
  .tm-btns{flex-direction:column;margin-top:0}
  .tm-btn{width:100%;padding:15px 20px}
  .tm-cat{flex-direction:column;gap:12px}
  .tm-enr .tm-btn{width:auto}
}

/* ══════════════ Cibles tactiles ══════════════
   44 × 44 px minimum, mais seulement là où le doigt sert : sur une souris,
   agrandir les liens de pied de page ne ferait qu'espacer le pied de page. */
@media (pointer:coarse){
  footer.site ul{gap:2px}
  footer.site ul a,
  .menu a,
  .ariane a,
  .tm-liens a, .tm-lien,
  .liste a{ display:inline-flex; align-items:center; min-height:44px }
  .btn-back{ min-height:44px }
  .langue, .nav-tel{ min-height:44px; min-width:44px; justify-content:center }
  .burger{ width:44px; height:44px }
  .saut:focus{ min-height:44px; display:inline-flex; align-items:center }
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* ══════════════ Blogue ══════════════
   Trois blocs neufs : la carte d'article, le rappel de série en tête de texte,
   et le pas suivant au bas. Aucune couleur hors palette. Rappel de MARQUE-C21 :
   sur fond clair, le texte est toujours en gris poussé — la hiérarchie se fait
   par la taille, la graisse et l'interlettrage, jamais par un gris plus pâle,
   parce qu'aucune couleur claire de la palette ne passe 4,5:1 sur blanc. */

.billets{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px}
.billet{display:flex}
/* Toute la carte est la cible, pas seulement le titre : viser un lien de deux
   mots au doigt sur 390 px est le genre de détail qui se paie en rebond. */
.billet > a{flex:1;display:flex;flex-direction:column;text-decoration:none;
  color:var(--gris-pousse);background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r);padding:22px 24px 20px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sec-blanc .billet > a{background:var(--os)}
.billet > a:hover,.billet > a:focus-visible{transform:translateY(-3px);
  box-shadow:var(--ombre-m);border-color:var(--gris-pousse)}
.billet-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;
  font-family:var(--titre);font-size:.71rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris-pousse)}
.billet-serie{display:inline-flex;align-items:center;gap:8px}
.billet-serie::before{content:"";width:18px;height:3px;background:var(--or);
  border-radius:2px;flex:0 0 auto}
.billet h2,.billet h3{margin:0 0 10px;font-size:clamp(1.06rem,1.8vw,1.24rem);line-height:1.3}
.billet-desc{margin:0 0 18px;font-size:.94rem;color:var(--gris-pousse)}
.billet-lire{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  min-height:26px;font-weight:700;font-size:.9rem}
.billet > a:hover .billet-lire{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--or);text-decoration-thickness:2px}
.voir-tout{margin:24px 0 0}
.voir-tout a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-weight:700;text-decoration:none}
.voir-tout a:hover{text-decoration:underline;text-underline-offset:3px}

/* Date et signature sous le H1. L'attribution n'est pas décorative : sur un
   site de courtage, un texte qui touche la valeur doit porter le nom et le
   titre du titulaire de permis. */
.par-qui{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  margin:20px 0 0;padding-top:15px;border-top:1px solid var(--ligne);max-width:66ch;
  font-size:.84rem;font-weight:600;color:var(--gris-pousse)}
.par-qui time{font-family:var(--titre);letter-spacing:.06em;text-transform:uppercase;
  font-size:.75rem;font-weight:700}
.par-qui-nom{display:inline-flex;align-items:center;gap:10px}
.par-qui-nom::before{content:"";width:1px;height:14px;background:var(--ligne);flex:0 0 auto}

/* Rappel de série en tête d'article. Un lecteur qui arrive par Google sur le
   deuxième texte doit voir tout de suite qu'il y en a un avant — sinon il
   repart au lieu de remonter. */
.serie{max-width:72ch;margin:0 0 34px;padding:18px 22px 14px;background:var(--blanc);
  border:1px solid var(--ligne);border-top:3px solid var(--or);border-radius:var(--r)}
.serie-nom{font-family:var(--titre);font-weight:700;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 6px;color:var(--gris-pousse)}
.serie-etapes{list-style:none;margin:0;padding:0;display:grid;gap:0}
.serie-etapes li{display:flex}
.serie-etapes li + li{border-top:1px solid var(--gris-leger)}
.serie-etapes a,.serie-etapes span{flex:1;display:flex;align-items:center;min-height:44px;
  padding:8px 0;font-size:.93rem;color:var(--gris-pousse);text-decoration:none}
.serie-etapes b{font-family:var(--titre);margin-right:9px;flex:0 0 auto}
.serie-etapes a:hover{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--or);text-decoration-thickness:2px}
/* L'étape en cours : elle se signale par la graisse et par un filet or à
   gauche, pas par une couleur de texte — le contraste doit rester entier. */
.serie-etapes li[aria-current] > span{font-weight:700;
  box-shadow:inset 3px 0 0 var(--or);padding-left:11px}

/* Le pas suivant, au bas de l'article. C'est le lien le plus important de la
   page après le bouton : il tient sur toute la largeur du texte. */
.suivant{display:flex;align-items:center;gap:18px;margin:38px 0 0;padding:20px 24px;
  background:var(--gris-pousse);color:#fff;border-radius:var(--r);text-decoration:none;
  transition:background .18s}
.suivant:hover{background:#1b1b1c}
.suivant-label{display:block;font-family:var(--titre);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--or);margin-bottom:5px}
.suivant-titre{display:block;font-family:var(--titre);font-weight:700;
  font-size:clamp(1.02rem,1.8vw,1.16rem);line-height:1.3;color:#fff}
.suivant > .fleche{margin-left:auto;flex:0 0 auto;font-size:1.5rem;color:var(--or)}
.suivant > span:not(.fleche){display:block}

/* Ligne de sources au pied d'un encadré de limite. */
.sources{margin:14px 0 0!important;padding-top:12px;border-top:1px solid rgba(37,37,38,.14);
  font-size:.81rem;line-height:1.5}

@media(max-width:640px){
  .billets{grid-template-columns:1fr}
  .suivant{flex-wrap:wrap;gap:12px;padding:20px}
  .suivant > .fleche{margin-left:0}
  .par-qui-nom::before{display:none}
  .par-qui{gap:2px 0;flex-direction:column;align-items:flex-start}
}