:root{
--ivoire:#FAF8F4;--blanc:#FFFFFF;--encre:#1C2430;--nuit:#24344D;
--or:#A98B5D;--or-texte:#85683D;--or-voile:rgba(169,139,93,.07);--or-clair:#E4D6BC;
--gris:#6B7280;--filet:#D9D4CA;--filet-clair:#E8E4DC;
--font-titre:'Playfair Display','Iowan Old Style',Georgia,serif;--font-corps:'Questrial','Avenir Next',system-ui,sans-serif;
--corps:clamp(17px,0.55vw + 15.2px,18.5px);--interligne:1.68;
--h1:clamp(34px,2.6vw + 21px,54px);--h2:clamp(25px,1.1vw + 20px,32px);--h3:clamp(20px,0.4vw + 18.5px,22px);
--chapo:clamp(19px,0.7vw + 16.5px,22px);--petit:15px;--eyebrow:12px;
--h1-lh:1.10;--h2-lh:1.22;--h3-lh:1.38;
--h1-ls:-0.018em;--h2-ls:-0.008em;--eyebrow-ls:0.24em;
--titre-graisse:500;
--section-y:clamp(64px,7vw,104px);--section-y-s:clamp(40px,4.5vw,64px);--section-y-l:clamp(88px,10vw,152px);
--para-y:1.05em;
--largeur:1180px;--lecture:66ch;--lecture-large:78ch;
--largeur-l:1280px;--marge-active:230px;--gouttiere:72px;
--marge:32px;
--duree:180ms;--courbe:cubic-bezier(.22,.61,.36,1);
--trait:1px;--rayon:0px;--barre-h:62px;--entete-h:80px;
--trait-double:3px;--cran:14px;--passe:14px;
--barre-bureau-h:62px;--case-h:52px;
}
:lang(ru){--font-titre:'Playfair Display',Georgia,serif;--font-corps:'Jost','Questrial',system-ui,sans-serif}
:lang(ar){--font-titre:'Noto Naskh Arabic','Amiri',serif;--font-corps:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h) + 16px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--or-voile);color:var(--encre)}

body{
 background:var(--ivoire);color:var(--encre);
 font-family:var(--font-corps);font-size:var(--corps);line-height:var(--interligne);
 font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
 text-align:start;
}

/* ── Écritures non latines ─────────────────────────────────────────
   L'arabe a besoin d'un cran de corps en plus et d'un interligne plus
   généreux : les hampes et les points diacritiques occupent la hauteur.
   Et surtout : PAS d'interlettrage, PAS de capitales. L'interlettrage
   casse les ligatures de l'arabe, et l'arabe n'a pas de casse. */
:lang(ar) body{font-size:calc(var(--corps) * 1.08);line-height:1.9}
:lang(ar) .eyebrow,:lang(ar) .btn,:lang(ar) .fil,:lang(ar) .pied-grille h4,
:lang(ar) .paire__lab,:lang(ar) .encadre-legal strong,:lang(ar) .sommaire>p,
:lang(ar) .voisines>p,:lang(ar) .banniere .sur{
 letter-spacing:normal;text-transform:none;font-size:14px;
}
/* Le cyrillique de Playfair est plus large : on relâche la contrainte de
   mesure des titres pour éviter les coupes. */
:lang(ru) h1,:lang(ru) h2{max-width:28ch}

/* ── Utilitaires ─────────────────────────────────────────────────── */
.wrap{max-width:var(--largeur);margin-inline:auto;padding-inline:var(--marge)}
.lecture{max-width:var(--lecture)}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{position:static;display:block;padding:12px;background:var(--nuit);color:#fff}

/* ── Transitions et focus ─────────────────────────────────────────
   Un seul anneau de focus pour tout le site. Il remplace les quatre
   `outline:none` de v5 : au clavier, v5 était muet. */
a,button,summary,.carte,.btn,input,textarea,select{
 transition:color var(--duree) var(--courbe),
            border-color var(--duree) var(--courbe),
            background-color var(--duree) var(--courbe),
            box-shadow var(--duree) var(--courbe),
            text-decoration-color var(--duree) var(--courbe);
}
:focus-visible{outline:2px solid var(--or-texte);outline-offset:3px;border-radius:var(--rayon)}
:focus:not(:focus-visible){outline:none}

/* ── Eyebrow ─────────────────────────────────────────────────────── */
.eyebrow{
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;
 color:var(--or-texte);line-height:1;
 display:flex;align-items:center;gap:.9em;margin-block-end:1.3em;
}
.eyebrow::after{content:"";flex:0 0 2.4rem;height:var(--trait);background:var(--or);opacity:.65}

/* ── En-tête ─────────────────────────────────────────────────────── */
header{
 background:var(--ivoire);position:sticky;inset-block-start:0;z-index:80;
 border-block-end:var(--trait) solid var(--filet);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:14px}
.logo img{height:52px;width:auto}

.nav-bureau{display:flex;gap:2px;align-items:center}
.nav-bureau>li{list-style:none;position:relative}
.nav-bureau>li>a,.nav-bureau>li>button{
 display:block;padding:10px 15px;
 font-family:var(--font-titre);font-size:15.5px;font-weight:400;
 color:var(--encre);background:none;border:0;cursor:pointer;
}
/* v5 passait le libellé en or : 3,03:1, hors AA. Le signal passe dans un
   filet doré sous le mot, le texte va au bleu nuit. */
.nav-bureau>li>a:hover,.nav-bureau>li>button:hover,.nav-bureau>li:focus-within>button{
 color:var(--nuit);box-shadow:inset 0 -1px 0 var(--or);
}
.nav-bureau li[aria-current]>a{box-shadow:inset 0 -2px 0 var(--or)}

.sous-menu{
 position:absolute;inset-block-start:100%;inset-inline-start:0;min-width:280px;
 background:var(--blanc);border:var(--trait) solid var(--filet);padding-block:16px;
 opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:opacity var(--duree) var(--courbe),transform var(--duree) var(--courbe),visibility var(--duree);
 box-shadow:none;
}
.nav-bureau>li:hover .sous-menu,.nav-bureau>li:focus-within .sous-menu{opacity:1;visibility:visible;transform:none}
.sous-menu.large{min-width:640px;display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;padding:22px 26px}
.sous-menu li{list-style:none}
.sous-menu a{display:block;padding:7px 24px;font-size:15px;color:var(--encre)}
.sous-menu.large a{padding-inline:0}
.sous-menu a:hover{color:var(--or-texte)}
.sous-menu .titre-groupe{
 font-size:11.5px;letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--gris);
 padding-block:10px 6px;border-block-end:var(--trait) solid var(--filet);margin-block-end:6px;
}

.tel-entete{
 font-size:14px;letter-spacing:.06em;color:var(--encre);
 border:var(--trait) solid var(--or);padding:10px 18px;white-space:nowrap;
}
.tel-entete:hover{background:var(--or-voile);border-color:var(--or-texte);color:var(--or-texte)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;font-size:22px;color:var(--encre)}

/* ── Fil d'Ariane ────────────────────────────────────────────────── */
.fil{font-size:12.5px;color:var(--gris);padding-block-start:22px}
.fil a:hover{color:var(--encre);text-decoration:underline;text-decoration-color:var(--or)}
.fil span{margin-inline:7px;opacity:.5}

/* ── Chapeau de page ─────────────────────────────────────────────── */
.chapeau{padding-block:52px 8px}
.chapeau .eyebrow{margin-block-end:16px}
.chapeau h1{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);
 max-width:18ch;text-wrap:balance;
}
.chapeau .resume{
 max-width:var(--lecture-large);color:var(--gris);
 font-size:var(--chapo);line-height:1.55;margin-block-start:20px;
}

/* ── Sommaire ancré ──────────────────────────────────────────────
   v5 : encadré blanc à deux colonnes, un demi-écran avant le premier mot
   de la page la plus longue du site. v6 : colonne collante en marge sur
   grand écran, replié derrière un chevron sur mobile. */
.sommaire{
 background:none;border:0;border-block-start:var(--trait) solid var(--or);
 padding:18px 0 0;margin:0;max-width:none;
}
.sommaire>p{
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;
 color:var(--or-texte);margin-block-end:10px;
}
.sommaire ol{columns:1;list-style:none;counter-reset:s;margin:0}
.sommaire li{margin:0;counter-increment:s;border-block-end:var(--trait) solid var(--filet-clair)}
.sommaire li:last-child{border-block-end:0}
.sommaire a{
 display:grid;grid-template-columns:2.2em 1fr;gap:.3em;
 padding-block:10px;font-size:14.5px;line-height:1.4;color:var(--gris);border:0;
}
.sommaire a::before{
 content:counter(s,decimal-leading-zero);
 color:var(--or-texte);opacity:.7;font-variant-numeric:tabular-nums;
}
.sommaire a:hover,.sommaire a[aria-current="true"]{color:var(--encre)}

/* ── Corps éditorial ─────────────────────────────────────────────
   Chaque H2 vit dans son propre <article> : l'écart réel entre sections
   valait padding-bottom + margin-top, jamais --section-y (déclaré dans
   v5 et jamais utilisé). Ici il est piloté d'un seul endroit. */
article{padding-block-end:0}
.wrap+.wrap>article{margin-block-start:var(--section-y)}
.banniere+.wrap>article{margin-block-start:var(--section-y-s)}

article h2{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);
 max-width:24ch;margin:0 0 .42em;padding-block-start:1.1rem;
 position:relative;scroll-margin-top:calc(var(--entete-h) + 24px);text-wrap:balance;
}
/* Le filet court doré : le repère qui manque pour balayer dix-huit
   sections à l'œil. Il ponctue, il ne découpe pas. */
article h2::before{
 content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
 width:3.4rem;height:var(--trait);background:var(--or);
}
article h3{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);font-style:italic;
 font-size:var(--h3);line-height:var(--h3-lh);color:var(--nuit);
 margin-block:2.1em .5em;max-width:34ch;
}
:lang(ar) article h3{font-style:normal;color:var(--nuit)}
article p,article ul,article ol{max-width:var(--lecture);margin-block-end:var(--para-y);text-wrap:pretty}
article p:last-child,article ul:last-child,article ol:last-child{margin-block-end:0}
article h2+p,article h3+p,article h2+ul,article h3+ul{margin-block-start:0}
article ul{list-style:none}
article li{position:relative;padding-inline-start:22px;margin-block-end:.5em}
article ul li::before{
 content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
 width:9px;height:var(--trait);background:var(--or);
}
article ol{list-style:decimal;padding-inline-start:1.4em}
article ol li{padding-inline-start:0}

/* Questrial n'a qu'une graisse : <strong> déclenchait un faux-gras
   synthétisé. L'emphase passe par la police de titre — dans un
   paragraphe, un terme en Playfair se détache mieux qu'un gras. */
strong,b{font-weight:400;font-family:var(--font-titre);font-size:1.04em;color:var(--encre)}
:lang(ru) strong,:lang(ru) b{font-family:var(--font-corps);font-weight:500;font-size:1em}
:lang(ar) strong,:lang(ar) b{font-family:var(--font-corps);font-weight:400;color:var(--nuit);font-size:1em}
em,i{font-style:italic}
:lang(ar) em,:lang(ar) i{font-style:normal;color:var(--nuit)}

/* Liens éditoriaux : dans v5 ils ne se distinguaient pas du texte. */
article a:not(.btn){
 color:var(--encre);text-decoration:underline;text-decoration-thickness:var(--trait);
 text-underline-offset:.2em;text-decoration-color:var(--filet);
}
article a:not(.btn):hover{color:var(--or-texte);text-decoration-color:var(--or)}

/* ── Encadré réglementaire ───────────────────────────────────────
   Le bord-gauche-coloré-sur-fond-blanc est le tic visuel le plus daté de
   v5. Deux filets, rien d'autre. */
.encadre-legal{
 background:none;border:0;
 border-block:var(--trait) solid var(--filet);
 padding-block:24px;margin-block:var(--section-y-s);
 max-width:var(--lecture-large);font-size:var(--petit);color:var(--gris);line-height:1.7;
}
.encadre-legal strong{
 display:block;margin-block-end:8px;font-family:var(--font-corps);font-size:var(--eyebrow);
 letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--or-texte);
}

/* ── Galeries : un cas, ses vues, sa légende ──────────────────────
   Les photographies d'un même patient forment un bloc, séparé du
   suivant par un filet. Toutes les 26 photos dans une grille continue
   ne laissaient plus deviner quelle vue allait avec laquelle. */
.cas{
 margin-block:0 var(--section-y-s);
 padding-block-end:var(--section-y-s);
 border-block-end:var(--trait) solid var(--filet);
}
.cas:last-of-type{border-block-end:0}
.cas__vues{
 display:grid;grid-template-columns:1fr 1fr;gap:14px;
 align-items:stretch;
}
/* Les deux vues d'une paire doivent occuper la MEME hauteur : sans quoi
   l'etiquette « apres » remonte et la comparaison se lit de travers.
   Les fichiers ont tous la meme largeur native, seule leur hauteur
   varie — de 12 % au plus.
   « contain » et non « cover » : recadrer rognerait l'apres et pas
   l'avant, et un bras paraitrait plus fin par l'effet du cadrage seul.
   Sur des photographies avant/apres, c'est la comparaison elle-meme
   qu'on fausserait. */
.cas__vues figure{
 margin:0;display:flex;flex-direction:column;
}
.cas__vues img{
 inline-size:100%;flex:1 1 auto;min-block-size:0;
 object-fit:contain;object-position:center;display:block;
}
.cas__vues figcaption{margin-block-start:auto}
/* Avant / Apres : releve sur l'ancien site, une paire par ligne. C'est
   cette etiquette qui rend la page lisible, plus encore que le
   groupement. */
.cas__vues figcaption{
 margin-block-start:7px;font-family:var(--font-corps);
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);
 text-transform:uppercase;color:var(--gris);
}
.cas__legende{
 margin-block-start:12px;margin-block-end:0;
 font-family:var(--font-corps);font-size:var(--eyebrow);
 letter-spacing:var(--eyebrow-ls);text-transform:uppercase;
 color:var(--or-texte);
}
@media (max-width:560px){
 .cas__vues{gap:10px}
}

/* ── Repères de temps ─────────────────────────────────────────────
   En tête de fiche, pour qui doit organiser un déplacement. Filets et
   petites capitales, comme les encadrés légaux : c'est de l'information
   de cadrage, pas une mise en avant. */
/* ── L'essentiel ─────────────────────────────────────────────────
   Le tableau de faits en tete de page. Sobre a dessein : ce qu'on
   veut, c'est qu'il se lise en cinq secondes et qu'il s'extraie
   proprement. Le cadre defile horizontalement plutot que de forcer
   la page a le faire — sur un telephone en arabe comme en francais. */
.essentiel-cadre{overflow-x:auto;margin:var(--cran) 0}
.essentiel{width:100%;border-collapse:collapse;font-size:.95rem}
.essentiel caption{text-align:start;font-weight:600;letter-spacing:.02em;
  padding-bottom:.6rem;color:var(--encre)}
.essentiel th,.essentiel td{padding:.55rem .8rem;text-align:start;
  vertical-align:top;border-bottom:1px solid var(--filet-clair)}
.essentiel th{font-weight:500;color:var(--gris);white-space:nowrap;
  width:38%}
.essentiel tr:last-child th,.essentiel tr:last-child td{border-bottom:0}
@media(max-width:560px){
  .essentiel th{width:auto;white-space:normal}
  .essentiel th,.essentiel td{padding:.45rem .5rem;font-size:.9rem}
}

.reperes{
 border-block:var(--trait) solid var(--filet);
 padding-block:22px;margin-block:0 var(--section-y-s);
 max-width:var(--lecture-large);
}
.reperes__titre{
 margin:0 0 14px;font-family:var(--font-corps);font-size:var(--eyebrow);
 letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--or-texte);
}
.reperes dl{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:14px 28px;margin:0;
}
.reperes dt{
 font-size:var(--petit);color:var(--gris);line-height:1.4;margin:0;
}
.reperes dd{
 margin:2px 0 0;font-size:1.02em;line-height:1.3;
}
.reperes__note{
 margin-block-start:16px;font-size:var(--petit);color:var(--gris);
 line-height:1.6;
}
@media (max-width:560px){
 .reperes dl{grid-template-columns:1fr 1fr}
}

/* ── Emplacements de recette : jamais rendus en production ───────── */
.a-rediger{display:none}
html[data-recette] .a-rediger{
 display:block;border:var(--trait) dashed var(--filet);padding:18px 22px;
 margin-block:26px;max-width:var(--lecture);color:#9AA3B0;font-size:14px;
}

/* ── Bannière ────────────────────────────────────────────────────
   v5 posait un h1 en --encre sur une photographie : illisible sur une
   image claire, invisible sur une image sombre. Voile uni à 34 % — un
   voile plat, pas un dégradé — et texte ivoire. */
.banniere{position:relative;background:var(--encre)}
.banniere img{width:100%;height:clamp(380px,62vh,660px);object-fit:cover}
.banniere::after{content:"";position:absolute;inset:0;background:rgba(28,36,48,.34)}
.banniere .dessus{
 position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
 align-items:center;justify-content:center;text-align:center;padding:40px;
}
.banniere .sur{font-size:12px;letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--or-clair)}
.banniere h1{
 font-family:var(--font-titre);font-weight:400;font-style:italic;
 font-size:clamp(34px,4.8vw,60px);line-height:1.14;
 max-width:17ch;margin-block:22px 24px;color:var(--ivoire);text-wrap:balance;
}
:lang(ar) .banniere h1{font-style:normal}
.banniere .sig{font-family:var(--font-titre);font-size:19px;color:var(--ivoire);opacity:.88}

/* ── Gabarits d'image ────────────────────────────────────────────── */
.vis-a-vis{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:64px;align-items:center}
.encadre{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:stretch}
.encadre .colonne-img img{width:100%;height:100%;object-fit:cover;min-height:400px}
.encadre .colonne-texte{padding-inline:48px;display:flex;flex-direction:column;justify-content:center}
.mosaique{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;margin-block:30px}
.mosaique figure{margin:0}
figcaption{font-size:var(--petit);color:var(--gris);margin-block-start:10px;line-height:1.6}

/* ── Galerie avant / après ───────────────────────────────────────
   Voir appariement_galerie.py pour le balisage. La paire devient
   l'unité ; la relation se lit sans légende. */
.paires{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--section-y-s) 40px;margin-block-start:36px}
.paire{margin:0}
/* Direction 1a : les volets sont montés sur passe-partout — une marge
   blanche à l'intérieur du filet, comme une pièce sous verre. Le mat
   sépare la photographie du fond ivoire sans l'encadrer d'un aplat. */
.paire__volets{
 position:relative;display:grid;grid-template-columns:1fr 1fr;
 border:var(--trait) solid var(--filet);background:var(--blanc);
 padding:var(--passe);
}
.paire__volet+.paire__volet{border-inline-start:var(--trait) solid var(--filet)}
.paire__volet img{display:block;width:100%;height:auto}
/* Le libellé est SOUS la photographie : rien ne se surimprime à une image
   qui porte déjà une pastille d'anonymisation. */
.paire__lab{
 display:block;padding:9px 12px 10px;border-block-start:var(--trait) solid var(--filet-clair);
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--gris);
}
.paire__volet:last-child .paire__lab{color:var(--or-texte)}
.paire__volets::after{
 content:"→";position:absolute;inset-block-start:50%;inset-inline-start:50%;
 transform:translate(-50%,-50%);width:34px;height:34px;
 display:grid;place-items:center;background:var(--ivoire);
 border:var(--trait) solid var(--filet);color:var(--or-texte);font-size:14px;line-height:1;
}
.paire figcaption{max-width:48ch;margin-block-start:14px}

/* ── Cartes et voisines ─────────────────────────────────────────
   Le translateY(-2px) de v5 faisait bouger la mise en page au survol.
   Ici un filet doré se déploie : même signal, aucun mouvement. */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0 36px;margin-block-start:28px}
.carte{
 display:block;background:none;border:0;border-block-start:var(--trait) solid var(--filet);
 padding-block:24px 26px;position:relative;overflow:hidden;
}
.carte::after{
 content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
 width:100%;height:var(--trait);background:var(--or);
 transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--courbe);
}
[dir="rtl"] .carte::after{transform-origin:right}
/* Direction 1a : cran doré à l'angle d'attaque de la carte — une marque de
   sertissage, deux branches d'un pixel. Il se retourne en RTL avec les
   propriétés logiques. */
.carte::before{
 content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
 width:var(--cran);height:var(--cran);
 border-block-start:var(--trait) solid var(--or);
 border-inline-start:var(--trait) solid var(--or);
}
.carte:hover::after,.carte:focus-visible::after{transform:scaleX(1)}
.carte h3{font-family:var(--font-titre);font-weight:var(--titre-graisse);font-size:20px;margin-block-end:8px}
.carte:hover h3{color:var(--nuit)}
.carte p{color:var(--gris);font-size:15px;line-height:1.6;margin:0}
.carte .fleche{display:block;color:var(--or-texte);font-size:13px;margin-block-start:16px;letter-spacing:.04em}
.carte .fleche i{font-style:normal;display:inline-block}
[dir="rtl"] .carte .fleche i{transform:scaleX(-1)}
.voisines{border-block-start:var(--trait) solid var(--filet);padding-block-start:34px;margin-block-start:var(--section-y)}
.voisines>p{font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--or-texte);margin:0}

/* ── Boutons ─────────────────────────────────────────────────────
   v5 remplissait le bouton de bleu nuit au survol, ce que la charte
   interdit. Voile à 7 %, filet qui se renforce. */
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:48px;padding-inline:32px;
 border:var(--trait) solid var(--or);border-radius:var(--rayon);
 background:transparent;color:var(--encre);
 font-family:var(--font-corps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
 cursor:pointer;text-align:center;
}
.btn:hover{background:var(--or-voile);border-color:var(--or-texte);color:var(--or-texte)}
.btn:active{background:var(--or-voile);border-color:var(--nuit);color:var(--nuit)}
/* .plein disparaît : plus aucun aplat. Le bouton principal se distingue
   par un filet doublé, pas par un fond. */
/* Direction 1a : l'action principale porte un SECOND filet, en retrait de
   --trait-double. Au survol c'est le filet extérieur qui prend l'or et
   l'intérieur qui s'assombrit : le bouton se resserre au lieu de
   s'allumer. La marge réserve la place du filet extérieur. */
.btn.plein{position:relative;margin:calc(var(--trait-double) + var(--trait));box-shadow:none}
.btn.plein::after{
 content:"";position:absolute;pointer-events:none;
 inset:calc(-1 * (var(--trait-double) + var(--trait)));
 border:var(--trait) solid var(--filet-clair);
 transition:border-color var(--duree) var(--courbe);
}
.btn.plein:hover{background:var(--or-voile);border-color:var(--or-texte);color:var(--or-texte)}
.btn.plein:hover::after{border-color:var(--or)}
.btn.plein:focus-visible::after{border-color:var(--or)}
.btn.clair{border-color:rgba(255,255,255,.5);color:var(--blanc)}
.btn.clair:hover{background:rgba(255,255,255,.08);border-color:var(--blanc);color:var(--blanc)}

/* ── Appel à l'action ───────────────────────────────────────────
   Le bandeau bleu nuit centré se répétait au pied des cinquante et une
   pages : le seul moment où le site haussait la voix, et il le faisait
   partout à la fois. Désaturé, aligné au texte, avec les mentions
   légales dans le bloc — la contrainte déontologique devient la caution
   du praticien, là où l'on hésite. */
.action{
 background:none;color:var(--encre);text-align:start;
 border-block-start:var(--trait) solid var(--or);
 padding-block:var(--section-y-s) var(--section-y-l);
 margin-block-start:var(--section-y);
}
.action h2{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);
 color:var(--encre);margin:0 0 .45em;max-width:20ch;
}
.action p{color:var(--gris);max-width:54ch;margin:0 0 28px}
.action .duo{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start}
.action .btn,.action .btn.plein,.action .btn.clair{
 border-color:var(--or);color:var(--encre);background:transparent;box-shadow:none;
}
.action .btn:hover{background:var(--or-voile);border-color:var(--or-texte);color:var(--or-texte)}
.action .mentions{
 margin-block-start:30px;padding-block-start:16px;
 border-block-start:var(--trait) solid var(--filet-clair);
 font-size:13px;color:var(--gris);line-height:1.65;max-width:66ch;
}

.rappel{
 border-block:var(--trait) solid var(--filet);padding-block:24px;
 margin-block:44px;max-width:var(--lecture-large);
 display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.rappel p{margin:0;font-size:16px}

/* ── Pied de page ───────────────────────────────────────────────── */
footer{
 background:var(--blanc);border-block-start:var(--trait) solid var(--filet);
 padding-block:56px 40px;font-size:14.5px;color:var(--gris);
}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-block-end:40px}
.pied-grille h4{
 font-family:var(--font-corps);font-size:11.5px;letter-spacing:var(--eyebrow-ls);
 text-transform:uppercase;color:var(--encre);margin-block-end:14px;
}
.pied-grille li{list-style:none;margin-block-end:8px}
.pied-grille a:hover{color:var(--or-texte)}
.pied-logo img{height:44px;margin-block-end:16px}
.pied-bas{border-block-start:var(--trait) solid var(--filet);padding-block-start:22px;font-size:13px;text-align:center}
.pied-bas p{margin-block:5px}
/* Mention de langue de référence, sur les pages traduites. */
.pied-bas .fait-foi{color:var(--gris);opacity:.85}

/* ── Sélecteur de langue ─────────────────────────────────────────
   Une liste de liens, aucun script. Chaque langue s'annonce dans sa
   propre écriture : une lectrice arabophone cherche العربية, pas « Arabe ». */
.langues ul{display:flex;align-items:center;gap:0;list-style:none}
.langues li+li{border-inline-start:var(--trait) solid var(--filet)}
.langues a,.langues span{
 display:block;padding:6px 12px;font-size:12.5px;letter-spacing:.06em;color:var(--gris);
}
.langues a:hover{color:var(--encre)}
/* Un numéro de téléphone, une adresse, une heure ne sont pas du texte
   arabe : sans isolation, l'algorithme bidirectionnel inverse les groupes
   de chiffres et affiche un numéro FAUX. Sur l'élément dont c'est toute la
   raison d'être, c'est le pire défaut possible. */
[dir="rtl"] .tel-entete,[dir="rtl"] .barre-bureau__tel,
[dir="rtl"] .portes__tel a,[dir="rtl"] a[href^="tel:"]{
 direction:ltr;unicode-bidi:isolate;
}
/* Le sélecteur est rendu deux fois — barre d'en-tête et panneau déroulant —
   et le CSS n'en montre qu'un seul. Même procédé que nav-bureau /
   nav-mobile. Dans la barre étroite d'un téléphone il prenait une ligne
   entière et « Русский » débordait à droite. */
@media (max-width:1024px){.header-in .langues{display:none}}
@media (min-width:1025px){.nav-mobile .langues{display:none}}
.langues [aria-current]{color:var(--encre);box-shadow:inset 0 -1px 0 var(--or)}

/* ── « La version française fait foi » ───────────────────────────
   En pied de chaque page traduite. Une mention, pas un avertissement :
   elle doit rassurer sur le sérieux, pas jeter un doute sur la page. */
.fait-foi{
 color:var(--gris);font-size:13px;line-height:1.65;
 max-width:66ch;margin-inline:auto;
}
.fait-foi a{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.2em}
.fait-foi a:hover{color:var(--or-texte)}

/* ── Formulaire ──────────────────────────────────────────────────
   Le cadre est posé, le formulaire n'est pas actif : il sera branché sur
   le VPS. Les champs sont désactivés et l'annonce le dit — un formulaire
   qui a l'air de fonctionner sans envoyer est pire que pas de formulaire. */
.formulaire{max-width:var(--lecture-large);margin-block-start:var(--section-y-s)}
.formulaire .avis{
 border-block:var(--trait) solid var(--filet);padding-block:20px;
 margin-block-end:36px;font-size:var(--petit);color:var(--gris);line-height:1.7;
}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ.pleine{grid-column:1 / -1}
.champ label{
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--or-texte);
}
:lang(ar) .champ label{letter-spacing:normal;text-transform:none;font-size:14px}
.champ input,.champ textarea,.champ select{
 font-family:var(--font-corps);font-size:16px;line-height:1.5;color:var(--encre);
 background:transparent;border:0;
 border-block-end:var(--trait) solid var(--filet);
 padding-block:10px;border-radius:0;min-height:44px;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:hover,.champ textarea:hover{border-block-end-color:var(--gris)}
.champ input:focus,.champ textarea:focus{
 outline:none;border-block-end-color:var(--or);box-shadow:0 1px 0 0 var(--or);
}
.champ input:disabled,.champ textarea:disabled{color:var(--gris);opacity:.55;cursor:not-allowed}
.formulaire .rgpd{
 margin-block-start:32px;padding-block-start:16px;
 border-block-start:var(--trait) solid var(--filet-clair);
 font-size:13px;color:var(--gris);line-height:1.65;max-width:66ch;
}
.formulaire .btn[disabled]{opacity:.45;cursor:not-allowed}
.formulaire .btn[disabled]:hover{background:transparent;border-color:var(--or);color:var(--encre)}
@media (max-width:640px){.champs{grid-template-columns:1fr}}

/* ── Éléments réservés au mobile ─────────────────────────────────── */
.appel-mobile{display:none}
.nav-mobile{display:none}

/* ══ Mobile ═══════════════════════════════════════════════════════ */
@media (max-width:1024px){
 .nav-bureau,.tel-entete{display:none}
 .burger{display:block}
 .header-in{padding-block:10px}
 .logo img{height:44px}
 .wrap{padding-inline:22px}
 .vis-a-vis,.encadre{grid-template-columns:1fr;gap:32px}
 .encadre .colonne-texte{padding:36px 0}
 .pied-grille{grid-template-columns:1fr 1fr;gap:30px}
 html{scroll-padding-top:80px}
 .langues{padding-block:14px;border-block-start:var(--trait) solid var(--filet)}
 /* Quatre langues ne tiennent pas sur une ligne de 375 px : le selecteur
    etait pense pour deux ou trois, et « Русский » sortait de l'ecran.
    Une grille de deux colonnes les rend toutes atteignables, avec une
    zone tapable confortable. */
 .langues ul{
  display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;
 }
 .langues li+li{border-inline-start:0}
 .langues li{border-block-start:var(--trait) solid var(--filet)}
 .langues li:nth-child(-n+2){border-block-start:0}
 .langues li:nth-child(even){border-inline-start:var(--trait) solid var(--filet)}
 .langues a,.langues span{text-align:center;padding-block:13px;font-size:13.5px}

 .nav-mobile{border-block-start:var(--trait) solid var(--filet);padding-block:10px 20px}
 .nav-mobile.ouvert{display:block}
 .nav-mobile details{border-block-end:var(--trait) solid var(--filet)}
 .nav-mobile summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding-block:18px;font-family:var(--font-titre);font-weight:var(--titre-graisse);font-size:20px;
 }
 .nav-mobile summary::-webkit-details-marker{display:none}
 /* Le « + / − » de v5 sautait d'une glyphe à l'autre. Un chevron qui
    pivote : même information, sans à-coup. */
 .nav-mobile summary::after{
  content:"";width:8px;height:8px;flex:none;margin-inline-end:4px;
  border-inline-end:var(--trait) solid var(--or);
  border-block-end:var(--trait) solid var(--or);
  transform:rotate(-45deg);transition:transform var(--duree) var(--courbe);
 }
 .nav-mobile details[open] summary::after{transform:rotate(45deg)}
 .nav-mobile details[open] summary{color:var(--nuit)}
 .nav-mobile ul{
  padding:0 0 16px;margin-inline-start:2px;
  padding-inline-start:18px;border-inline-start:var(--trait) solid var(--filet);
 }
 .nav-mobile li{list-style:none;margin:0}
 .nav-mobile a{display:block;padding-block:11px;min-height:44px;font-size:16px;color:var(--gris)}
 .nav-mobile a:hover{color:var(--encre)}

 /* Barre d'appel : la pièce la plus insistante du site, présente en
    permanence sur chaque page. Ivoire, filet doré, deux canaux à parts
    égales, cibles de 62 px. */
 .appel-mobile{
  display:grid;grid-template-columns:1fr 1fr;
  position:fixed;inset-block-end:0;inset-inline:0;z-index:90;
  background:var(--ivoire);border-block-start:var(--trait) solid var(--or);
  box-shadow:none;padding-block-end:env(safe-area-inset-bottom);
 }
 .appel-mobile a{
  min-height:var(--barre-h);display:flex;align-items:center;justify-content:center;
  background:none;color:var(--encre);padding-inline:8px;
  font-size:13px;letter-spacing:.1em;text-transform:none;
 }
 .appel-mobile a+a{border-inline-start:var(--trait) solid var(--filet);color:var(--gris)}
 .appel-mobile a:active{background:var(--or-voile)}
 body{padding-block-end:calc(var(--barre-h) + env(safe-area-inset-bottom))}

 .sommaire{border-block-end:var(--trait) solid var(--filet);padding-block-end:6px}
}

/* ══ 2b — marge active ═══════════════════════════════════════════
   Le défaut de v6.1 : la colonne de lecture était calée au bord gauche
   d'un conteneur large, donc le vide ne se voyait qu'à droite. La mesure
   était juste — c'est la marge qui ne servait à rien.
   Ici le sommaire occupe la marge et le couple [marge | texte] est centré.
   Nécessite .page-longue sur <main> quand le sommaire est présent. */
/* Les .wrap imbriqués dans la colonne ne doivent plus recentrer ni
   remettre de gouttière : c'est la grille qui tient la mesure. */
.grille-lecture .wrap{max-width:none;margin-inline:0;padding-inline:0}
@media (min-width:1100px){
 .grille-lecture{
  display:grid;grid-template-columns:var(--marge-active) minmax(0,var(--lecture));
  gap:var(--gouttiere);justify-content:center;align-items:start;
 }
 /* La marge tient dans UN enfant de grille : sommaire et question y
    sont empilés. Deux enfants pour deux colonnes — sinon le texte
    passe à la ligne suivante et hérite de la colonne étroite. */
 .grille-lecture>.marge-active{
  position:sticky;inset-block-start:calc(var(--entete-h) + 16px);
  max-width:var(--marge-active);margin:0;
 }
 /* Dans la colonne, la mesure est celle de la grille : les max-width de
    paragraphe feraient une seconde colonne dans la colonne. */
 .colonne-lecture article p,
 .colonne-lecture article ul,
 .colonne-lecture article ol{max-width:none}
}

/* Au-delà de 1600px, la page ne doit pas devenir un timbre-poste : la
   mesure monte à 72 signes et le corps d'un cran. Rien d'autre ne bouge. */
@media (min-width:1600px){
 :root{--largeur:var(--largeur-l);--lecture:72ch;--corps:19.5px}
}

@media (max-width:560px){
 .pied-grille{grid-template-columns:1fr}
 .chapeau{padding-block:30px 14px}
 .paires{grid-template-columns:1fr}
 .cartes{gap:0}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
 html{scroll-behavior:auto}
}

@media print{
 header,.appel-mobile,.nav-mobile,.sommaire,.action,.a-rediger{display:none!important}
 body{background:#fff;font-size:11pt}
 article h2{page-break-after:avoid}
 .paire{page-break-inside:avoid}
}

/* ══ Déclencheurs de contact ═══════════════════════════════════════ */

/* ── Les trois portes ────────────────────────────────────────────
   Ordonnées par engagement, de la plus à la moins engageante. La porte
   du milieu — être rappelée — inverse la charge de l'appel ; c'est
   presque toujours celle qui déclenche le plus. Aucune n'est mise en
   avant par un aplat : la hiérarchie passe par l'ordre et par le second
   filet de l'action principale. */
.portes{
 border-block-start:var(--trait) solid var(--or);
 padding-block:var(--section-y-s) var(--section-y-l);
 margin-block-start:var(--section-y);
}
.portes h2{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);
 margin:0 0 .45em;max-width:20ch;
}
.portes__sous{color:var(--gris);max-width:54ch;margin:0 0 32px}
.portes__grille{
 display:grid;grid-template-columns:repeat(3,1fr);
 border-block:var(--trait) solid var(--filet);
}
.porte{padding:28px 30px 30px}
.porte+.porte{border-inline-start:var(--trait) solid var(--filet)}
.porte__rang{
 font-size:var(--eyebrow);letter-spacing:var(--eyebrow-ls);
 text-transform:uppercase;color:var(--gris);margin:0 0 12px;
}
:lang(ar) .porte__rang{letter-spacing:normal;text-transform:none;font-size:14px}
.porte h3{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:20px;margin:0 0 10px;
}
.porte p{color:var(--gris);font-size:15px;line-height:1.6;margin:0 0 20px}
.portes__tel{
 display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;
 margin-block-start:26px;font-size:var(--petit);color:var(--gris);
}
.portes__tel a{font-family:var(--font-titre);font-size:19px;color:var(--encre);white-space:nowrap}
.portes__tel a:hover{color:var(--or-texte)}

@media (max-width:900px){
 .portes__grille{grid-template-columns:1fr}
 .porte+.porte{
  border-inline-start:0;border-block-start:var(--trait) solid var(--filet);
 }
}

/* ── Le composeur de disponibilités ──────────────────────────────
   Le site ne voit jamais l'agenda du cabinet et ne réserve rien : la
   patiente dit quand elle peut, le secrétariat confirme. La grille est
   volontairement grossière — cinq jours, deux moments. Une grille fine
   imiterait un agenda réel et créerait l'attente d'une confirmation
   immédiate qu'on ne peut pas tenir. */
.composeur{
 border:var(--trait) solid var(--filet);background:var(--blanc);
 padding:36px 38px 38px;max-width:var(--lecture-large);
 margin-block-start:var(--section-y-s);
}
.composeur h2{
 font-family:var(--font-titre);font-weight:var(--titre-graisse);
 font-size:var(--h3);line-height:1.25;margin:0 0 10px;max-width:22ch;
}
.composeur__aide{color:var(--gris);font-size:var(--petit);margin:0 0 26px;max-width:52ch}
.composeur .eyebrow{margin-block:32px 12px}
.composeur .eyebrow:first-of-type{margin-block-start:0}

.dispo__grille{
 display:grid;grid-template-columns:96px repeat(5,1fr);
 gap:var(--trait);background:var(--filet-clair);
 border:var(--trait) solid var(--filet-clair);
}
.dispo__jour{
 background:var(--ivoire);padding-block:10px;text-align:center;
 font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
:lang(ar) .dispo__jour{letter-spacing:normal;text-transform:none;font-size:13px}
.dispo__intitule{
 background:var(--ivoire);padding-inline:12px;
 display:flex;flex-direction:column;justify-content:center;
 min-block-size:var(--case-h);font-size:14.5px;
}
.dispo__heures{font-size:12px;color:var(--gris)}

/* La case est une vraie case à cocher : le formulaire marche sans
   JavaScript, se navigue au clavier, et s'annonce correctement au
   lecteur d'écran sans un seul aria-*. */
.dispo__case{
 position:relative;background:var(--blanc);cursor:pointer;
 min-block-size:var(--case-h);display:grid;place-items:center;
 font-size:15px;color:var(--gris);
 transition:background-color var(--duree) var(--courbe),
            color var(--duree) var(--courbe),
            box-shadow var(--duree) var(--courbe);
}
.dispo__case input{
 position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;
}
.dispo__nom{
 position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;
}
.dispo__case:hover{background:var(--ivoire);color:var(--or-texte)}
.dispo__case:has(input:checked){
 background:var(--or-voile);color:var(--or-texte);
 box-shadow:inset 0 0 0 var(--trait) var(--or);
}
.dispo__case:has(input:checked) span[aria-hidden]::before{content:"✓"}
.dispo__case:has(input:checked) span[aria-hidden]{font-size:0}
.dispo__case:has(input:checked) span[aria-hidden]::before{font-size:15px}
.dispo__case:has(input:focus-visible){
 outline:2px solid var(--or-texte);outline-offset:-3px;
}

.composeur__delais{display:flex;gap:10px;flex-wrap:wrap}
.composeur__delais label{
 border:var(--trait) solid var(--filet);padding:11px 16px;
 font-size:14.5px;color:var(--gris);min-block-size:44px;
 display:flex;align-items:center;cursor:pointer;position:relative;
 transition:border-color var(--duree) var(--courbe),
            color var(--duree) var(--courbe),
            background-color var(--duree) var(--courbe);
}
.composeur__delais input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.composeur__delais label:hover{border-color:var(--gris)}
.composeur__delais label:has(input:checked){
 border-color:var(--or);background:var(--or-voile);color:var(--or-texte);
}
.composeur__delais label:has(input:focus-visible){
 outline:2px solid var(--or-texte);outline-offset:3px;
}

.composeur__champs{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.composeur__champs label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--gris)}
.composeur__champs .pleine{grid-column:1 / -1}
.composeur__champs input,.composeur__champs textarea{
 font-family:var(--font-corps);font-size:16px;line-height:1.5;color:var(--encre);
 background:transparent;border:0;border-block-end:var(--trait) solid var(--filet);
 padding-block:10px;border-radius:0;min-block-size:44px;
}
.composeur__champs textarea{min-block-size:110px;resize:vertical}
.composeur__champs input:hover,.composeur__champs textarea:hover{border-block-end-color:var(--gris)}
.composeur__champs input:focus,.composeur__champs textarea:focus{
 outline:none;border-block-end-color:var(--or);box-shadow:0 1px 0 0 var(--or);
}

.composeur .btn.plein{margin-block-start:30px}
.composeur__avis,.composeur .mentions{
 margin-block-start:28px;padding-block-start:16px;
 border-block-start:var(--trait) solid var(--filet-clair);
 font-size:13.5px;color:var(--gris);line-height:1.7;max-width:62ch;
}

/* Le pot de miel : hors flux, hors tabulation, hors lecteur d'écran —
   mais dans le DOM. display:none est détecté par une partie des robots,
   qui remplissent alors le champ correctement. */
.piege{
 position:absolute;inset-inline-start:-9999px;inset-block-start:auto;
 inline-size:1px;block-size:1px;overflow:hidden;
}

/* Retour après envoi. Le message d'erreur porte le numéro : une patiente
   dont la demande a échoué ne doit pas se retrouver sans recours. */
.retour-envoi{
 border-block:var(--trait) solid var(--or);padding-block:22px;
 margin-block-end:32px;max-width:var(--lecture-large);
}
.retour-envoi p{margin:0;color:var(--encre)}
.retour-envoi.echec{border-color:var(--filet)}
.retour-envoi.echec p{color:var(--gris)}
/* Le formulaire est replie apres un envoi reussi ; ce lien le rouvre.
   Un lien, pas un bouton plein : proposer, sans relancer. */
.retour-envoi__autre{
 margin-block-start:14px;padding:0;border:0;background:none;cursor:pointer;
 font-family:var(--font-corps);font-size:var(--petit);color:var(--or-texte);
 text-decoration:underline;text-decoration-color:var(--or);
 text-underline-offset:.25em;
}
.retour-envoi__autre:hover{color:var(--encre)}

@media (max-width:640px){
 .composeur{padding:26px 22px 28px;border-inline:0}
 .composeur__champs{grid-template-columns:1fr}
 /* Sous 640 px la grille à six colonnes devient illisible : on passe en
    listes par moment, ce qui garde des cibles confortables. */
 .dispo__grille{grid-template-columns:1fr 1fr 1fr}
 .dispo__jour{display:none}
 .dispo__intitule{grid-column:1 / -1;min-block-size:auto;padding-block:12px}
 .dispo__case{min-block-size:56px;font-size:0}
 .dispo__case .dispo__nom{
  position:static;inline-size:auto;block-size:auto;overflow:visible;
  clip-path:none;font-size:14px;white-space:normal;text-align:center;
 }
 .dispo__case span[aria-hidden]{display:none}
}

/* ── La barre de bureau ──────────────────────────────────────────
   Le mobile a sa barre d'appel ; le bureau n'avait rien. Une lectrice
   arrivée au milieu d'une fiche de deux mille mots n'a aucun moyen
   d'agir sans remonter. Elle nomme l'intervention lue : c'est le seul
   endroit du site qui tienne compte d'où se trouve la lectrice.
   Elle n'apparaît qu'après le premier écran (data-apres, posé en JS ou
   par IntersectionObserver côté gabarit). */
.barre-bureau{
 position:fixed;inset-block-end:0;inset-inline:0;z-index:70;
 background:var(--ivoire);border-block-start:var(--trait) solid var(--or);
 transform:translateY(100%);
 transition:transform 260ms var(--courbe);
}
.barre-bureau[data-visible]{transform:none}
.barre-bureau__in{
 max-width:var(--largeur);margin-inline:auto;padding-inline:var(--marge);
 display:flex;align-items:center;justify-content:space-between;gap:24px;
 min-block-size:var(--barre-bureau-h);
}
/* C'est le libellé qui absorbe la contrainte, jamais les actions : un
   numéro de téléphone coupé en deux lignes est le défaut le plus visible
   qu'on puisse laisser sur l'élément dont c'est toute la raison d'être. */
.barre-bureau__quoi{
 font-size:var(--petit);color:var(--gris);
 min-inline-size:0;flex:1 1 auto;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.barre-bureau__quoi strong{color:var(--encre)}
.barre-bureau__actions{display:flex;align-items:center;flex:0 0 auto}
.barre-bureau__actions a{
 display:flex;align-items:center;min-block-size:44px;padding-inline:20px;
 font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--gris);border-inline-start:var(--trait) solid var(--filet-clair);
 white-space:nowrap;
}
:lang(ar) .barre-bureau__actions a{letter-spacing:normal;text-transform:none;font-size:14px}
.barre-bureau__actions a:hover{color:var(--or-texte)}
.barre-bureau__tel{
 font-family:var(--font-titre);font-size:18px;text-transform:none;
 letter-spacing:0;color:var(--encre);
}

/* Sous 1024 px la barre d'appel mobile prend le relais : deux barres
   fixes empilées mangeraient un tiers de l'écran. */
@media (max-width:1024px){.barre-bureau{display:none}}
@media (min-width:1025px){
 body{padding-block-end:var(--barre-bureau-h)}
}

/* ── La question en marge ────────────────────────────────────────
   Sous le sommaire de la colonne 2b, donc visible pendant toute la
   lecture sans jamais couvrir le texte. Poser une question est le geste
   le moins engageant qui existe : c'est pour cela qu'il déclenche. */
.marge-question{
 border-block-start:var(--trait) solid var(--or);
 margin-block-start:30px;padding-block-start:18px;
}
.marge-question p{font-size:14.5px;color:var(--gris);line-height:1.6;margin:0 0 14px}
.marge-question textarea{
 inline-size:100%;font-family:var(--font-corps);font-size:15px;line-height:1.5;
 background:var(--blanc);border:var(--trait) solid var(--filet);
 padding:10px 12px;resize:vertical;min-block-size:76px;border-radius:0;
}
.marge-question input{
 inline-size:100%;margin-block-start:10px;font-family:var(--font-corps);
 font-size:15px;background:transparent;border:0;
 border-block-end:var(--trait) solid var(--filet);padding-block:9px;
 min-block-size:44px;border-radius:0;
}
.marge-question textarea:focus{
 outline:none;border-color:var(--or);box-shadow:0 0 0 var(--trait) var(--or);
}
.marge-question input:focus{
 outline:none;border-block-end-color:var(--or);box-shadow:0 1px 0 0 var(--or);
}
.marge-question .btn{margin-block-start:16px;inline-size:100%}
.marge-question .secret{
 font-size:12.5px;color:var(--gris);line-height:1.6;
 margin-block-start:16px;padding-block-start:12px;
 border-block-start:var(--trait) solid var(--filet-clair);
}
@media (max-width:1099px){.marge-question{max-width:var(--lecture)}}

/* ── Réponses à l'objection ──────────────────────────────────────
   Le doute ne survient pas au bas de la page : il survient à la fin de
   la section « risques ». Un seul bloc, une seule objection, jamais deux
   à la suite. */
.objection{
 border-block:var(--trait) solid var(--filet);padding-block:26px;
 margin-block:var(--section-y-s);max-width:var(--lecture-large);
}
.objection__titre{
 font-family:var(--font-titre);font-size:19px;line-height:1.6;
 margin:0 0 12px;max-width:30ch;
}
.objection p{color:var(--gris);font-size:16px;line-height:1.7;margin:0 0 20px;max-width:52ch}
.objection a{
 font-size:13px;letter-spacing:.04em;color:var(--or-texte);
 text-decoration:underline;text-decoration-color:var(--or);
 text-underline-offset:.2em;
}
.objection a:hover{color:var(--encre)}

@media print{
 .barre-bureau,.composeur,.marge-question{display:none!important}
}