/* Retours du 27 octobre : valeurs ajoutées à la dernière version du guide. */
.hero .bouton{background:#fff;color:#111}
.hero .bouton:hover,.hero .bouton:focus-visible{background:#EC622B;color:#fff}
/* Largeur intrinsèque tant que le texte tient, retour à la ligne au besoin. */
.sc-service-card .sc-doc,.sc-phone .sc-doc{width:fit-content;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.sc-doc .bouton__texte{min-width:0}
.bouton__texte.est-brouille{max-width:100%;white-space:pre-wrap}
@media(min-width:900px){
 .nav{--barre-h:calc(clamp(44px,2.9vw,56px) + 5px)}
 .nav__principal,.nav__actions{min-height:var(--barre-h)}
 .nav__liens a{font-size:calc(clamp(8px,.525vw,10px) + 2px)}
 .nav__liens{gap:clamp(4px,1.8vw,35px);margin-right:0}
 .menu-ouvert .nav__burger,.menu-ouvert .nav__burger:focus-visible{visibility:hidden;opacity:0;pointer-events:none}
 .faq h2{margin-bottom:24px}
 .faq__aide .pastille{font:500 15px/1.4 var(--f-repere);letter-spacing:-.02em}
}
@media(max-width:899px){.menu-ouvert .prestation__numero{font-size:clamp(9.5px,2.3vw,11px)}}
.nav__burger{background:#efedea}
.nav__burger:hover{background:#dedbd7}
.faq__aide .pastille{border:0;border-radius:0;background:none;padding:0;text-transform:uppercase}
.faq__aide .pastille:hover{background:none;color:inherit}
[data-page-legale] *{animation:none!important;transition:none!important}
[data-legal-language][hidden]{display:none}
/* Le dialogue ne defile plus lui-meme : il devient une colonne dont seul le
   contenu glisse, pour que l'embleme et la croix restent toujours atteignables.
   « display » reste a la feuille du navigateur tant que [open] est absent,
   sinon le dialogue serait visible fermé. */
.projet-modal{position:fixed;inset:0;max-width:900px;width:calc(100% - 40px);max-height:min(calc(100% - 32px),calc(100dvh - 32px));margin:auto;padding:32px 32px 48px;border:0;border-radius:14px;background:#faf8f4;color:#111;overflow-y:auto;overscroll-behavior:contain;font-family:var(--f-texte);grid-template-rows:minmax(0,1fr)}
.projet-modal__defilant{min-height:0;width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* Le defilement rogne a ses bords : sans cette gouttiere, l'anneau de mise
   au point des champs, pose a 4 px a l'exterieur, y etait coupe. Le padding
   du dialogue est reduit d'autant, la largeur utile ne bouge pas. */
.projet-modal__defilant{padding-inline:8px}
.projet-modal :is(input,textarea,button,summary,a):focus-visible{outline-offset:2px}
.projet-modal :is(input,textarea){scroll-margin:24px}
/* Entree et sortie. « allow-discrete » laisse display et overlay attendre la
   fin de la transition, sans quoi la fermeture serait instantanee. L'etat de
   base porte la sortie, l'etat [open] l'entree. */
.projet-modal{
 opacity:0;transform:translateY(14px) scale(.97);
 transition:opacity .2s ease-in,transform .26s cubic-bezier(.5,-.3,.76,.32),
            overlay .26s allow-discrete,display .26s allow-discrete;
}
.projet-modal[open]{
 display:grid;opacity:1;transform:none;
 transition:opacity .26s ease-out,transform .55s cubic-bezier(.18,1.32,.34,1),
            overlay .55s allow-discrete,display .55s allow-discrete;
}
@starting-style{.projet-modal[open]{opacity:0;transform:translateY(14px) scale(.97)}}
.projet-modal::backdrop{background:#0009;backdrop-filter:blur(7px);opacity:0;
 transition:opacity .24s ease,overlay .24s allow-discrete,display .24s allow-discrete}
.projet-modal[open]::backdrop{opacity:1}
@starting-style{.projet-modal[open]::backdrop{opacity:0}}
.projet-modal__logo{position:absolute;left:28px;top:24px;object-fit:contain}
/* Croix du formulaire : celle de la barre de navigation, trait pour trait.
   La zone tactile reste celle d'avant grace a ::after, le bouton etant
   desormais moins haut que les 44 px d'origine. */
.projet-modal__fermer{position:absolute;right:16px;top:18px;width:56px;height:32px;padding:0;border:0;border-radius:3px;background:#f0cfcb;cursor:pointer}
.projet-modal__fermer::after{content:'';position:absolute;inset:-6px 0}
.projet-modal__fermer span:not(.sr-only){position:absolute;left:50%;top:50%;width:21px;height:1.7px;margin:0;border-radius:999px;background:#000;opacity:1;transform-origin:center}
.projet-modal__fermer span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.projet-modal__fermer span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.projet-modal__fermer:focus-visible{outline:2px solid #111;outline-offset:3px}
.projet-modal__carte{width:min(380px,75%);height:auto;aspect-ratio:1214/595;margin:4px auto 20px;position:relative}
.projet-modal__carte .carte__fond{width:100%;height:100%;opacity:.28}
.projet-modal__carte .carte__point{opacity:0;transform:scale(.3);animation:none;transition:opacity .6s ease,transform .6s ease}
.projet-modal__carte .carte__point.est-actif{opacity:1;transform:scale(1)}
.projet-modal__progression{display:block;width:min(380px,100%);height:2px;margin:0 auto 48px;border:0;appearance:none;background:#ddd;color:#111}
.projet-modal__progression::-webkit-progress-bar{background:#ddd}.projet-modal__progression::-webkit-progress-value{background:#111}.projet-modal__progression::-moz-progress-bar{background:#111}
.projet-modal__repere{text-align:center;font:12px/1.4 var(--f-repere);letter-spacing:.03em}
.projet-modal h2{max-width:600px;margin:14px auto 36px;text-align:center;font:700 clamp(25px,3.5vw,36px)/1.2 var(--f-titre)}
.projet-modal form{max-width:510px;margin:auto}.projet-modal fieldset{min-width:0;border:0;margin:0;padding:0}.projet-modal fieldset[hidden]{display:none}
.projet-modal label{display:block;font-size:13px;line-height:1.5}.projet-modal input:not([type=radio]),.projet-modal textarea{width:100%;border:1px solid #ddd;background:#fff;border-radius:8px;padding:13px 15px;color:#111;font:14px/1.5 var(--f-texte);margin-top:5px}
.projet-modal textarea{min-height:180px;resize:vertical}
.projet-modal .projet-choix{position:relative;display:flex;width:fit-content;max-width:100%;margin:12px auto;cursor:pointer}
.projet-choix input{position:absolute;opacity:0;width:1px;height:1px}.projet-choix span{display:block;padding:16px;border:1px solid transparent;border-radius:8px;background:white;font:12px/1.4 var(--f-repere);text-transform:uppercase;text-align:center}
.projet-choix input:checked+span{border-color:#bf3421;background:#f7e7e0}.projet-choix input:focus-visible+span{outline:2px solid #111;outline-offset:3px}
.projet-modal__coordonnees{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.projet-modal__message{font-size:14px;text-align:center;min-height:1.5em;margin:16px 0;color:#a92b19}
.projet-modal__actions{display:flex;justify-content:center;gap:16px;margin-top:20px}.projet-modal__actions button{border:1px solid #ddd;background:transparent;color:#111;border-radius:8px;padding:16px;font:12px/1.3 var(--f-repere);cursor:pointer}.projet-modal__actions [data-continuer]{background:#111;color:white;border-color:#111}.projet-modal__actions button:disabled{opacity:.5;cursor:wait}
.projet-modal [hidden]{display:none!important}body.contact-ouvert{overflow:hidden}
/* Entre 601 et 900 px, le dialogue garde sa forme mais respire moins. */
@media(max-width:900px){
 .projet-modal{width:calc(100% - 28px);padding:28px 18px 36px}
 .projet-modal__logo{left:22px;top:20px}
 .projet-modal h2{margin-bottom:28px}
}
/* Sous 600 px, le dialogue devient une feuille plein ecran qui monte du bas.
   Le depassement du rebond est comble par l'ombre portee, sinon le fond
   apparaitrait sous la feuille au moment ou elle depasse sa position. */
@media(max-width:600px){
 .projet-modal{
  top:0;left:0;right:0;bottom:auto;margin:0;
  width:100%;height:100dvh;max-width:none;max-height:100dvh;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  border-radius:0;padding:60px 14px 24px;
  box-shadow:0 72px 0 #faf8f4;
  opacity:1;transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,.02,.82,.28),
             overlay .3s allow-discrete,display .3s allow-discrete;
 }
 .projet-modal[open]{
  opacity:1;transform:none;
  transition:transform .56s cubic-bezier(.2,1.09,.32,1),
             overlay .56s allow-discrete,display .56s allow-discrete;
 }
 @starting-style{.projet-modal[open]{opacity:1;transform:translateY(100%)}}
 .projet-modal__logo{left:20px;top:18px;width:30px;height:30px}
 .projet-modal__fermer{right:12px;top:16px}
 .projet-modal__carte{width:78%;max-width:320px}
 .projet-modal__progression{margin-bottom:28px}
 .projet-modal__coordonnees{grid-template-columns:1fr}
 .projet-modal h2{margin-bottom:28px}
 /* 16 px au moins : en deca, iOS zoome sur le champ a la mise au point. */
 .projet-modal input:not([type=radio]),.projet-modal textarea{font-size:16px}
 .projet-modal textarea{min-height:140px}
 /* Les deux actions restent collees au bas de la zone de defilement : le
    bouton d'envoi est atteignable sans avoir a defiler jusqu'en bas. */
 .projet-modal__actions{position:sticky;bottom:0;z-index:2;margin-top:18px;
  padding:12px 0 calc(4px + env(safe-area-inset-bottom));background:#faf8f4;
  box-shadow:0 -12px 16px -8px #faf8f4}
}
/* L'entete du formulaire — carte, progression, sur-titre, titre — reste
   entiere sur telephone quelle que soit la hauteur d'ecran : c'est au
   contenu de defiler, pas a l'entete de disparaitre. */
/* Les deux actions se replient plutot que de deborder sur un ecran etroit. */
.projet-modal__actions{flex-wrap:wrap}
.projet-modal__actions button{flex:1 1 auto;min-width:0;max-width:260px}
@media(prefers-reduced-motion:reduce){
 .projet-modal,.projet-modal::backdrop,.projet-modal *{transition:none!important;animation:none!important}
 .projet-modal{transform:none!important;opacity:1!important}
}

/* ==================================================================== */
/* Barre de navigation : ouverture, logo, encoches et drapeaux.          */
/* Retours du 27 octobre, seconde passe.                                 */
/* ==================================================================== */

/* Repères communs : une seule durée et deux courbes pour toute la barre.
   La fermeture reprend exactement les mêmes règles, à une cadence plus
   courte : site.js pose « menu-fermeture » le temps du replis, ce qui
   remet chaque propriété à sa valeur fermée sans perdre l'apparence
   ouverte, et « menu-anime » pendant le mouvement. */
.nav{
 --menu-duree:.46s;
 --menu-courbe:cubic-bezier(.22,1,.36,1);
 --menu-rebond:cubic-bezier(.34,1.56,.64,1);
 min-height:0;
}
.menu-fermeture .nav{--menu-duree:.3s;--menu-rebond:cubic-bezier(.22,1,.36,1)}

/* Le panneau se déplie tout seul : la rangée de grille porte la hauteur,
   le contenu reste en place et se découvre. Plus de seconde animation en
   JavaScript qui tirait dans l'autre sens. Le panneau ne passe plus par
   l'opacité : il garderait un contexte d'empilement et le sommaire
   sauterait au-dessus de la barre en fin de course. */
.nav__panneau{opacity:1;visibility:hidden;transition:grid-template-rows var(--menu-duree) var(--menu-courbe),visibility var(--menu-duree)}
.menu-ouvert .nav__panneau{opacity:1;visibility:visible}
.menu-fermeture .nav__panneau{grid-template-rows:0fr;visibility:hidden}
/* Pendant le mouvement, la barre rogne son débordement : sans cela une
   barre de défilement apparaît et disparaît à chaque ouverture. */
.menu-anime .nav{overflow:hidden}

/* Le sommaire puis les cartes montent d'un souffle, l'un après l'autre. */
.nav__panneau-interieur>*{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform var(--menu-duree) var(--menu-courbe)}
.menu-ouvert .nav__panneau-interieur>*{opacity:1;transform:none}
.menu-ouvert .nav__sommaire{transition-delay:.05s}
.menu-ouvert .nav__cartes{transition-delay:.11s}
.menu-fermeture .nav__panneau-interieur>*{opacity:0;transform:translateY(14px);transition-delay:0s}

/* Masquage au défilement : même courbe que le reste de la barre. */
.nav--masquee{--nav-decalage:-14px;transition:opacity .26s ease,transform .26s var(--menu-courbe),visibility 0s .26s}

/* Téléphone et petite fenêtre : la barre devient une feuille plein écran.
   « left » et la translation horizontale ne bougent plus d'un état à
   l'autre (barre centrée dans les deux cas) : il reste la largeur, la
   marge haute, le rembourrage et la hauteur, qui glissent ensemble. */
@media(max-width:899px){
 .nav,.menu-ouvert .nav{transition:
  width var(--menu-duree) var(--menu-courbe),
  top var(--menu-duree) var(--menu-courbe),
  padding var(--menu-duree) var(--menu-courbe),
  min-height var(--menu-duree) var(--menu-courbe),
  transform var(--menu-duree) var(--menu-courbe),
  border-radius .28s ease,
  background-color .32s ease,
  opacity .2s ease}
 .menu-ouvert .nav{left:50%;transform:translateX(-50%) translateY(var(--nav-decalage));max-height:100dvh}
 .menu-fermeture .nav{padding:0;min-height:0;border-radius:4px;background:transparent}
}
@media(min-width:768px) and (max-width:899px){.menu-fermeture .nav{top:clamp(18px,1.3vw,25px);width:calc(100% - 48px)}}
@media(max-width:767px){.menu-fermeture .nav{top:clamp(18px,4.65vw,30px);width:77%}}
@media(max-width:360px){.menu-fermeture .nav{width:calc(100% - 32px)}}

/* Logo : il grandit d'un rebond à l'ouverture du menu. La largeur ne
   change plus d'un état à l'autre, tout passe par l'échelle, donc rien
   ne se recalcule et le mouvement reste franc sur téléphone. */
.nav{--logo-l:var(--logo);--logo-echelle:1}
@media(max-width:767px){.nav{--logo-l:min(calc(28.49vw - 32px),105px)}}
@media(max-width:360px){.nav{--logo-l:min(calc(37vw - 44px),105px)}}
.nav__logo{transform-origin:left center;transform:scale(var(--logo-echelle));transition:transform var(--menu-duree) var(--menu-rebond)}
.menu-ouvert .nav{--logo-echelle:1.3}
.menu-fermeture .nav{--logo-echelle:1}
@media(max-width:899px){
 .menu-ouvert .nav{--logo-echelle:1.38}
 .menu-ouvert .nav__logo{width:var(--logo-l);max-width:none;display:flex}
}
@media(max-width:767px){.menu-ouvert .nav{--logo-echelle:1.42}}

/* Bouton menu : une seule géométrie dans les deux états. La croix se
   forme par rotation des deux traits depuis leur place, sans passer en
   positionnement absolu : le morphing est donc continu dans les deux
   sens, et rien ne saute au moment de la fermeture. */
.nav{--burger-l:clamp(38px,2.72vw,52px);--burger-h:clamp(23px,1.61vw,31px);--burger-trait:2px;--burger-large:clamp(16px,1.22vw,24px);--burger-ecart:4px}
@media(max-width:767px){.nav{--burger-l:30px;--burger-h:20px;--burger-trait:1.5px;--burger-large:14px;--burger-ecart:3px}}
.nav__burger,.menu-ouvert .nav__burger{width:var(--burger-l);height:var(--burger-h);gap:var(--burger-ecart);flex:none}
.nav__burger span:not(.sr-only){width:var(--burger-large);height:var(--burger-trait);transition:transform var(--menu-duree) var(--menu-rebond),background-color .3s ease,opacity .2s ease}
@media(max-width:899px){
 .menu-ouvert .nav__burger{position:relative;background:transparent;border-radius:4px;opacity:1;visibility:visible;padding:0}
 .menu-ouvert .nav__burger::after{content:'';position:absolute;inset:-10px}
 .menu-ouvert .nav__burger span:not(.sr-only){position:static;top:auto;left:auto;margin:0;width:var(--burger-large);height:var(--burger-trait);border-radius:2px;background:var(--noir)}
 .menu-fermeture .nav__burger{background:#efedea}
}
/* Au doigt : la croix. */
@media(max-width:899px) and (hover:none){
 .menu-ouvert .nav__burger span:nth-child(1){transform:translateY(calc((var(--burger-ecart) + var(--burger-trait))/2)) rotate(45deg)}
 .menu-ouvert .nav__burger span:nth-child(2){transform:translateY(calc((var(--burger-ecart) + var(--burger-trait))/-2)) rotate(-45deg);opacity:1}
 .menu-fermeture .nav__burger span:not(.sr-only){transform:none}
}
@media(max-width:899px) and (pointer:coarse){
 .menu-ouvert .nav__burger span:nth-child(1){transform:translateY(calc((var(--burger-ecart) + var(--burger-trait))/2)) rotate(45deg)}
 .menu-ouvert .nav__burger span:nth-child(2){transform:translateY(calc((var(--burger-ecart) + var(--burger-trait))/-2)) rotate(-45deg);opacity:1}
 .menu-fermeture .nav__burger span:not(.sr-only){transform:none}
}
/* À la souris, y compris dans une fenêtre réduite ou sur un écran mis à
   l'échelle sous 900 px : pas de croix. Le bouton garde ses deux traits
   et referme le menu ; Échap et le clic au dehors referment aussi. */
@media(max-width:899px) and (hover:hover) and (pointer:fine){
 .menu-ouvert .nav__burger span:not(.sr-only),
 .menu-ouvert .nav__burger span:nth-child(1),
 .menu-ouvert .nav__burger span:nth-child(2){transform:none;opacity:1}
 .menu-ouvert .nav__burger,.menu-fermeture .nav__burger{background:#efedea}
}

/* Les deux encoches des extrémités sortent d'autant à gauche qu'à droite :
   la moitié de l'encoche est découpée dans la plaque, l'autre tombe hors
   d'elle. Les deux côtés montrent donc la même longueur. */
.nav{--encoche-sortie:calc(var(--encoche-l)/2)}
.nav__principal{-webkit-mask-position:-80px -20px,calc(-1*var(--encoche-sortie)) center;mask-position:-80px -20px,calc(-1*var(--encoche-sortie)) center}
.nav__actions{-webkit-mask-position:-80px -20px,calc(100% + var(--encoche-sortie)) center;mask-position:-80px -20px,calc(100% + var(--encoche-sortie)) center}

/* Sélecteur de langue : chaque langue porte son drapeau, comme le résumé.
   Le drapeau suit la langue de la ligne, pas celle de la page. */
.nav__langue li a,.nav__langue li[aria-disabled="true"]{display:flex;align-items:center;gap:9px;padding:9px 14px}
.nav__langue li .nav__drapeau{width:14px;height:10px;border-radius:1px}
html[lang] .nav__drapeau--fr{background:linear-gradient(90deg,#163c8c 0 33.33%,#fff 33.33% 66.66%,#d42f3c 66.66%);position:relative}
html[lang] .nav__drapeau--fr::after{display:none}
html[lang] .nav__drapeau--en{background:url('../img/flag-gb.svg') center/cover no-repeat;position:relative}
html[lang] .nav__drapeau--en::after{display:none}
html[lang] .nav__drapeau--zh{background:#de2910;position:relative}
html[lang] .nav__drapeau--zh::after{content:'★';position:absolute;display:block;color:#ffde00;font-size:6px;line-height:1;left:1px;top:0}
.nav__langue li .nav__drapeau--zh::after{font-size:7px;left:1.5px;top:1px}

@media(prefers-reduced-motion:reduce){
 .nav,.menu-ouvert .nav,.nav__panneau,.nav__panneau-interieur>*,.nav__logo,.nav__burger span:not(.sr-only){transition:none}
 .nav__panneau-interieur>*{opacity:1;transform:none}
 .menu-ouvert .nav,.menu-fermeture .nav{--logo-echelle:1}
 .nav--masquee{--nav-decalage:0px;opacity:1;visibility:visible;pointer-events:auto}
}

/* Responsive menu: labels participate in layout instead of overlapping cards. */
.menu-ouvert .nav__cartes,.menu-ouvert .prestation{min-width:0}
.menu-ouvert .prestation__numero{position:static;display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.4;margin-bottom:12px}
.menu-ouvert .prestation__numero span{display:block}
.menu-ouvert .prestation--sombre .prestation__numero{color:#fff}
.menu-ouvert .prestation .bouton{max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.menu-ouvert .prestation .bouton__texte{min-width:0}
@media(min-width:900px){
 .menu-ouvert .prestation{height:auto;min-height:240px}
 .menu-ouvert .prestation__numero{font-size:11px}
}
@media(max-width:899px){
 .menu-ouvert .nav{padding: max(20px,env(safe-area-inset-top)) clamp(16px,4.65vw,30px) max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain}
 .menu-ouvert .nav__bar{align-items:center;margin-bottom:24px;padding-top:0;min-height:44px}
 .menu-ouvert .nav__burger{width:44px;height:44px}
 .menu-ouvert .nav__burger::after{inset:0}
 .menu-ouvert .nav__menu{margin-bottom:18px}
 .menu-ouvert .nav__menu a{display:flex;align-items:center;min-height:44px;font-size:clamp(13px,2.5vw,17px);line-height:1.4;padding-block:8px;gap:12px}
 .menu-ouvert .nav__infos{font-size:14px;line-height:1.8;margin-bottom:16px;overflow-wrap:anywhere}
 .menu-ouvert .nav__sommaire>.nav__langue{align-self:flex-start;font-size:14px}
 .menu-ouvert .nav__langue summary{min-height:44px;display:flex;align-items:center}
 .menu-ouvert .nav__cartes{gap:16px;padding-top:20px}
 .menu-ouvert .prestation{padding:16px;min-height:230px}
 .menu-ouvert .prestation__numero{font-size:11px;min-height:31px}
 .menu-ouvert .prestation p{font-size:13px;line-height:1.5}
 .menu-ouvert .prestation__image{min-height:64px;max-height:90px;padding:8px 0}
 .menu-ouvert .prestation__image .carte-media{height:72px}
 .menu-ouvert .prestation .bouton{font-size:11px;min-height:44px;padding:10px 8px}
 .menu-ouvert .prestation--appel{min-height:180px;padding:16px 12px 12px;--cta-marge:12px;--cta-h:44px}
 .menu-ouvert .prestation--appel .prestation__entete{font-size:13px;flex-wrap:wrap;gap:8px 20px}
}
@media(max-width:559px){
 .menu-ouvert .nav__cartes{grid-template-columns:minmax(0,1fr)}
 .menu-ouvert .prestation{min-height:220px}
 .menu-ouvert .prestation__numero{min-height:0}
 .menu-ouvert .prestation__numero span{display:inline}
 .menu-ouvert .prestation--appel{min-height:180px}
 .menu-ouvert .prestation--appel .prestation__entete{flex-direction:column}
}
/* True transparent semicircular cut-outs, including Safari's mask syntax. */
.menu-ouvert .prestation--appel{
 --notch-y:calc(100% - var(--cta-h) - var(--cta-marge) - 10px);
 -webkit-mask-image:radial-gradient(circle at 0 var(--notch-y),transparent 7px,#000 7.5px),radial-gradient(circle at 100% var(--notch-y),transparent 7px,#000 7.5px);
 mask-image:radial-gradient(circle at 0 var(--notch-y),transparent 7px,#000 7.5px),radial-gradient(circle at 100% var(--notch-y),transparent 7px,#000 7.5px);
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-position:0 0;mask-position:0 0;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* Burger : proportions du visuel fourni, deux traits arrondis alignés à droite. */
body:not(.menu-ouvert) .nav .nav__burger{
 position:relative;width:56px;height:32px;padding:0;gap:0;flex:none;
 border:0;border-radius:6px;background:#f0cfcb;
}
body:not(.menu-ouvert) .nav .nav__burger span:not(.sr-only){
 position:absolute;left:auto;right:28.4%;top:37%;width:45.2%;height:2.2px;
 margin:0;border-radius:999px;background:#000;transform:none;opacity:1;
}
body:not(.menu-ouvert) .nav .nav__burger span:nth-child(2){top:60.5%;width:31.8%}
body:not(.menu-ouvert) .nav .nav__burger::after{content:'';position:absolute;inset:-6px 0}
body:not(.menu-ouvert) .nav .nav__burger:focus-visible{outline:2px solid #111;outline-offset:3px}

/* Croix mobile assortie au burger, selon le visuel fourni. */
@media(max-width:899px){
 body.menu-ouvert .nav .nav__burger{
  position:relative;top:auto;right:auto;width:56px;height:32px;padding:0;gap:0;
  border:0;border-radius:3px;background:#f0cfcb;opacity:1;visibility:visible;pointer-events:auto;
 }
 body.menu-ouvert .nav .nav__burger span:not(.sr-only){
  position:absolute;left:50%;right:auto;top:50%;width:21px;height:1.7px;
  margin:0;border-radius:999px;background:#000;opacity:1;transform-origin:center;
 }
 body.menu-ouvert .nav .nav__burger span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
 body.menu-ouvert .nav .nav__burger span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
 body.menu-ouvert .nav .nav__burger::after{content:'';position:absolute;inset:-6px 0}
 body.menu-ouvert .nav .nav__burger:focus-visible{outline:2px solid #111;outline-offset:3px}
}

/* Retours du 28 octobre. */

/* Sur téléphone, les chiffres comptent de nouveau à leur entrée dans l'écran.
   Le neutralisateur mobile rend tout visible d'office : le chiffre afficherait
   sa valeur finale puis repartirait de zéro. Il reste donc masqué jusqu'à son
   comptage, lui seul. */
@media(max-width:899px){
 .chiffre dt.encre-attente{opacity:0!important}
}

/* La F.A.Q. portait var(--t-h2) (6,2 vw sur téléphone) : nettement plus petit
   que les autres titres de section. Elle reprend exactement la taille de
   « SUR LE TERRAIN, », sur téléphone comme sur grand écran. */
.faq h2{font-size:clamp(30px,4vw,76px)}
@media(max-width:899px){
 .faq h2{font-size:clamp(32px,11.8vw,60px)}
}

/* <dialog>.showModal() place le focus sur le titre tabindex="-1" du
   formulaire. Ouverte au clavier, la boîte héritait alors de l'anneau rouge
   de :focus-visible et le titre passait pour un bouton. Ce titre n'est pas
   une cible interactive : pas d'anneau. */
#projet-titre:focus,#projet-titre:focus-visible{outline:none}

/* Pages légales : le corps de page est noir pour le reste du site, et la
   colonne de texte y est limitée à 78ch et centrée — le noir ressortait donc
   en deux bandes de part et d'autre. Ces pages passent en blanc plein. */
body.page-legale{background:#fff}
body.page-legale .page-texte{background:#fff}