/* ==========================================================================
   MAQUETTE 08 — « LA RIVE »
   Petrona + Karla · bleu nuit et sable · toutes les images en duotone.
   Feuille unique, mobile d'abord, aucune dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
/* TROIS couleurs, et rien de plus : le sable, le bleu nuit, le bleu-vert.
   Les six autres valeurs ci-dessous n'en sont que des versions plus sombres
   ou plus claires, calculées pour un rapport de contraste précis — pas des
   couleurs supplémentaires. Chaque rapport annoncé est mesuré. */
.m8{
  --sable:#F4EEE4;           /* le fond */
  --sable-2:#E7DDCD;         /* surface alternée */
  --nuit:#16324F;            /* bleu nuit — 11,4:1 sur le sable */
  --nuit-2:#0F2438;          /* le fond du bleu : urgence et pied de page */
  --rive:#2F6E7E;            /* bleu-vert — SURFACE et décor seulement */
  --rive-txt:#245968;        /* le même, assombri : 6,7:1 sur sable, 5,8:1 sur sable-2 */
  --rive-clair:#79B0BE;      /* 5,5:1 sur le bleu nuit */
  --encre:#16324F;           /* le texte EST le bleu nuit */
  --encre-2:#40566B;         /* 6,6:1 sur sable · 5,7:1 sur sable-2 */
  --encre-3:#4C6175;         /* 5,6:1 sur sable · 4,8:1 sur sable-2 */
  --clair:#F4EEE4;           /* 11,4:1 sur le bleu nuit */
  --clair-2:#93AAB9;         /* 5,4:1 sur le bleu nuit */
  --balise:#F0A98A;          /* le seul signal chaud : urgence, portrait faux */
  --filet:rgba(22,50,79,.16);
  --filet-clair:rgba(244,238,228,.20);

  --f-titre:'Petrona','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-texte:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-tech:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --t-xs:clamp(.75rem,.73rem + .08vw,.8125rem);
  --t-sm:clamp(.8438rem,.82rem + .12vw,.9375rem);
  --t-base:clamp(1.0313rem,1rem + .18vw,1.125rem);
  --t-md:clamp(1.125rem,1.07rem + .28vw,1.3125rem);
  --t-lg:clamp(1.3125rem,1.2rem + .55vw,1.75rem);
  --t-xl:clamp(1.75rem,1.45rem + 1.35vw,2.75rem);
  --t-2xl:clamp(2.25rem,1.7rem + 2.5vw,3.875rem);
  --t-3xl:clamp(2.625rem,1.75rem + 4.1vw,5.25rem);

  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem;
  --sect-y:clamp(3.5rem,2rem + 6.6vw,8rem);
  --goutt:clamp(1.15rem,.6rem + 2.6vw,3rem);
  --largeur:76rem; --largeur-pleine:96rem; --largeur-texte:40rem;

  /* LES COURBES. Trois rayons, déclinés partout : l'arche du premier écran,
     le galet des médias, le pavé des petits blocs. Un quatrième rayon
     rendrait les trois premiers décoratifs. */
  --r-arche:clamp(96px,20vw,230px) 26px 0 0;
  --r-galet:clamp(72px,14vw,170px) 20px clamp(72px,14vw,170px) 20px;
  --r-pave:18px 4px 18px 4px;
  --r-pleine:999px;
  --av-r:12px;               /* le marqueur « à valider » suit les courbes */

  --transi:220ms cubic-bezier(.4,0,.2,1);
  --tete-h:66px; --barre-h:0px;
}
@media (min-width:62rem){ .m8{ --tete-h:84px } }

/* --------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--tete-h) + var(--cmp-h,0px) + 2rem)}
body.m8{
  font-family:var(--f-texte); font-size:var(--t-base); line-height:1.68;
  font-weight:400; color:var(--encre); background:var(--sable);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none; overflow-x:hidden; padding-bottom:var(--barre-h);
}
img,picture,video,svg{display:block;max-width:100%;height:auto}
picture img{width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}

/* Petrona est une serif à FAIBLE contraste de plein et de délié : elle tient
   le très grand corps sans devenir maigre, et c'est pour cela qu'elle est
   ici. On la charge en 300 pour les titres monumentaux — au-delà de 3 rem
   une graisse normale s'empâte — et en 500/600 pour les petits. */
.m8 h1,.m8 h2,.m8 h3{
  font-family:var(--f-titre); font-weight:500;
  line-height:1.12; letter-spacing:-.012em; text-wrap:balance;
}
.m8 h4,.m8 h5{font-family:var(--f-texte);font-weight:700;line-height:1.35}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--rive-txt);outline-offset:3px;border-radius:3px}
.sect--nuit :focus-visible,.proue :focus-visible,.rive :focus-visible,
.appel :focus-visible,.urg :focus-visible,.pied :focus-visible{outline-color:var(--rive-clair)}
::selection{background:#CFE0E5;color:var(--nuit)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* -------------------------------------------------------- 3. UTILITAIRES */
.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--goutt)}
.conteneur--etroit{max-width:54rem}
.conteneur--texte{max-width:var(--largeur-texte)}
/* « Déborder d'un côté » sans jamais déborder de la fenêtre : une seconde
   largeur, plus large que le texte. Un vrai `100vw` ferait apparaître une
   barre de défilement horizontale dès qu'un ascenseur est présent. */
.pleine{width:100%;max-width:var(--largeur-pleine);margin-inline:auto;
  padding-inline:clamp(.6rem,2vw,1.6rem)}
.sect{padding-block:var(--sect-y)}
.sect--serree{padding-top:clamp(2.25rem,1.2rem + 3.4vw,4rem)}
.sect--sable2{background:var(--sable-2)}
.sect--nuit{background:var(--nuit);color:var(--clair)}
.sect--nuit h1,.sect--nuit h2,.sect--nuit h3{color:#fff}
.sect__suite{margin-top:var(--e-7)}
.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}
.tech{font-variant-numeric:tabular-nums;letter-spacing:.01em}

.sur{font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rive-txt);margin-bottom:var(--e-4)}
.sur--clair,.sect--nuit .sur{color:var(--rive-clair)}
.t1{font-size:var(--t-2xl);font-weight:300;max-width:18ch}
.t2{font-size:var(--t-xl);font-weight:400;max-width:22ch}
.t3{font-size:var(--t-lg);font-weight:500;max-width:24ch}
.chapo{font-size:var(--t-md);color:var(--encre-2);max-width:var(--largeur-texte);
  margin-top:var(--e-5)}
.sect--nuit .chapo{color:var(--clair-2)}
.entete-s{margin-bottom:clamp(2.25rem,1.4rem + 3.2vw,4rem)}
.entete-s--centre{text-align:center}
.entete-s--centre .t2,.entete-s--centre .chapo{margin-inline:auto}
.credit{display:block;color:var(--encre-3);margin-top:2px}

/* Le filet se trace à l'apparition, comme une ligne d'horizon qui se pose. */
.filet{height:1px;border:0;background:var(--rive-clair);opacity:.85;
  width:min(180px,44%);margin-block:var(--e-5);
  transform-origin:left center;scale:0 1;
  transition:scale 1000ms cubic-bezier(.22,1,.36,1)}
.filet.est-visible{scale:1 1}

/* Apparition au défilement. La classe .js autorise l'état masqué : sans
   JavaScript, rien n'est jamais caché. */
.js [data-anim]{opacity:0;translate:0 20px;
  transition:opacity 750ms ease,translate 750ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:100ms}
.js [data-anim][data-delai="2"]{transition-delay:200ms}
.js [data-anim][data-delai="3"]{transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .filet{scale:1 1 !important}
}

/* ------------------------------------------------------------ 4. DUOTONE */
/* LA SIGNATURE DE LA MAQUETTE.
   Deux calques sur une image désaturée :
     · un aplat BLEU NUIT en `screen`   → remonte les noirs jusqu'au bleu,
                                          sans toucher aux blancs ;
     · un aplat SABLE en `multiply`     → ramène les blancs sur le sable,
                                          sans réveiller les ombres.
   C'est la recette exacte d'un duotone d'imprimerie. L'autre méthode
   (`sepia + hue-rotate + saturate`) n'approche la teinte que sur des images
   neutres : dès qu'il y a du bois, du cuir ou de la peau — c'est-à-dire
   partout ici — elle dérive vers le violet.

   `isolation:isolate` est obligatoire : sans lui, le `multiply` se
   mélangerait aussi au fond de la page, et le sable virerait au gris sous
   chaque image. */
.duo{display:block;position:relative;overflow:hidden;isolation:isolate;
  background:var(--nuit)}
.duo picture{display:block;width:100%;height:100%}
.duo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.02)}
/* Les deux `z-index` ne sont PAS décoratifs, et ils ont coûté un tour de
   recette. `::before` est le PREMIER enfant dans l'ordre du document, avant
   le <picture> ; tant que l'image reste une simple boîte en flux, elle se
   peint sous les éléments positionnés et tout va bien. Mais l'image porte
   `scale` (la révélation au défilement), ce qui en fait un contexte
   d'empilement : elle remonte alors au même niveau que les pseudo-éléments
   et se peint APRÈS `::before`, dans l'ordre du document. Résultat observé
   sur la première capture : le calque `multiply` s'appliquait, le calque
   `screen` était recouvert, et le duotone se réduisait à un noir et blanc
   posé sur du sable. */
.duo::before,.duo::after{content:"";position:absolute;inset:0;pointer-events:none}
.duo::before{background:var(--nuit);mix-blend-mode:screen;z-index:1}
.duo::after{background:var(--sable);mix-blend-mode:multiply;z-index:2}

/* Réglages par famille d'images. Un duotone se règle sur l'ÉTENDUE des gris,
   pas sur la teinte : une photographie qui n'a que des ombres devient un
   aplat bleu, une photographie qui n'a que des hautes lumières devient un
   aplat sable. Ces deux modificateurs rouvrent la plage. */
.duo--sombre img{filter:grayscale(1) brightness(1.42) contrast(1.02)}
.duo--hero img{filter:grayscale(1) brightness(1.22) contrast(1.04)}
.duo--clair img{filter:grayscale(1) brightness(.88) contrast(1.16)}
/* Le portrait du praticien fait exception, et c'est assumé : un duotone
   complet rend un visage méconnaissable, or la seule chose que cette
   photographie doit faire, c'est montrer quelqu'un. On garde donc un tiers
   de la couleur d'origine et on n'applique les calques qu'à 40 %. */
.duo--visage img{filter:grayscale(.58) contrast(1.03) brightness(1.03)}
.duo--visage::before,.duo--visage::after{opacity:.46}

/* Repli pour les navigateurs sans `mix-blend-mode` : la méthode approximative
   vaut mieux que pas de duotone du tout. */
@supports not (mix-blend-mode:multiply){
  .duo::before,.duo::after{display:none}
  .duo img{filter:grayscale(1) sepia(.85) hue-rotate(163deg) saturate(2.1) contrast(1.05)}
}

/* Les images se révèlent : elles remontent lentement à la surface. Aucune
   boucle, aucun clignotement — un seul mouvement, une fois. */
.js [data-anim] .duo img{scale:1.06;
  transition:scale 1400ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible .duo img{scale:1}
@media (prefers-reduced-motion:reduce){
  .js [data-anim] .duo img{scale:1 !important}
}

/* Les formes. C'est ici que la maquette se distingue au premier coup d'œil
   de la maquette 01, qui est rectangulaire de bout en bout. */
.duo--arche{aspect-ratio:5/4;border-radius:var(--r-arche)}
.duo--galet{aspect-ratio:4/5;border-radius:var(--r-galet)}
.duo--pub{aspect-ratio:4/5;border-radius:0}
.duo--horizon{aspect-ratio:21/9;
  border-radius:20px clamp(70px,13vw,160px) 20px clamp(70px,13vw,160px)}
/* Le galet retourné, pour les images qui vivent à droite d'un texte. Le
   rapport 5/4 est celui du cliché du divan (480 × 377) : le recadrer serait
   couper un objet de musée pour l'accorder à une grille. */
.duo--gauche{aspect-ratio:5/4;
  border-radius:20px clamp(72px,14vw,170px) 20px clamp(72px,14vw,170px)}
@media (min-width:62rem){ .duo--arche{aspect-ratio:4/5} }
@media (max-width:40rem){ .duo--horizon{aspect-ratio:16/10} }

/* ------------------------------------------------- 5. LES ONDULATIONS */
/* Séparateur de sections. Le tracé est rempli de la couleur du DESSOUS, le
   bloc porte la couleur du DESSUS : la vague est donc l'endroit exact où
   l'une passe dans l'autre. Hauteur volontairement basse — une ondulation,
   pas une décoration de site de vacances. */
.ourlet{display:block;line-height:0;overflow:hidden}
.ourlet svg{display:block;width:100%;height:clamp(26px,3.4vw,48px)}
.o-sable{background:var(--sable)}
.o-sable2{background:var(--sable-2)}
.o-nuit{background:var(--nuit)}
.o-nuit2{background:var(--nuit-2)}
.o-rive{background:var(--rive)}
.o-v-sable path{fill:var(--sable)}
.o-v-sable2 path{fill:var(--sable-2)}
.o-v-nuit path{fill:var(--nuit)}
.o-v-nuit2 path{fill:var(--nuit-2)}
.o-v-rive path{fill:var(--rive)}

/* ------------------------------------------------------------ 6. BOUTONS */
.btn{
  --bg:var(--nuit);--fg:var(--sable);--bd:var(--nuit);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.8rem 1.7rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:var(--r-pleine);
  font-size:var(--t-sm);font-weight:700;letter-spacing:.01em;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:background var(--transi),color var(--transi),
             border-color var(--transi),transform var(--transi);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--accent{--bg:var(--rive-txt);--bd:var(--rive-txt)}
.btn--accent:hover{background:var(--nuit);border-color:var(--nuit)}
.btn--contour{--bg:transparent;--fg:var(--encre);--bd:rgba(22,50,79,.32)}
.btn--contour:hover{border-color:var(--nuit);background:rgba(22,50,79,.05)}
.btn--clair{--bg:var(--sable);--fg:var(--nuit);--bd:var(--sable)}
.btn--clair:hover{background:#fff;border-color:#fff}
.btn--contour-clair{--bg:transparent;--fg:var(--sable);--bd:rgba(244,238,228,.5)}
.btn--contour-clair:hover{border-color:var(--sable);background:rgba(244,238,228,.12)}
.btn--lg{min-height:3.5rem;padding:.95rem 2.1rem;font-size:var(--t-base)}
.btn--sm{min-height:2.6rem;padding:.5rem 1.1rem;font-size:var(--t-xs)}
.btn--bloc{width:100%}
.grp{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.grp--serre{margin-top:var(--e-3)}
@media (max-width:26rem){ .grp > .btn:not(.btn--sm){width:100%} }

.lien{display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--t-sm);font-weight:700;
  color:var(--rive-txt);text-decoration:none;
  border-bottom:1px solid var(--rive);padding-bottom:3px;
  transition:color var(--transi),gap var(--transi),border-color var(--transi)}
.lien:hover{color:var(--nuit);gap:.75rem;border-color:var(--nuit)}
.lien svg{width:1em;height:1em}
.lien--clair{color:var(--rive-clair);border-color:rgba(121,176,190,.6)}
.lien--clair:hover{color:#fff;border-color:#fff}

/* ------------------------------------------------------------- 7. EN-TÊTE */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;
  background:rgba(244,238,228,.88);
  border-bottom:1px solid transparent;
  transition:background var(--transi),border-color var(--transi)}
@supports (backdrop-filter:blur(12px)){
  .tete{-webkit-backdrop-filter:saturate(1.4) blur(14px);
        backdrop-filter:saturate(1.4) blur(14px)}
}
.tete.est-collee{background:rgba(244,238,228,.97);border-bottom-color:var(--filet)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-4);min-height:var(--tete-h)}
.marque{text-decoration:none;display:block;line-height:1.15;flex:none}
.marque__nom{display:block;font-family:var(--f-titre);font-size:var(--t-md);
  font-weight:600;letter-spacing:-.01em}
.marque__role{display:block;font-size:var(--t-xs);color:var(--encre-2);
  letter-spacing:.13em;text-transform:uppercase;margin-top:3px}
.nav{display:none;gap:clamp(.85rem,1.9vw,1.8rem)}
.nav a{font-size:var(--t-sm);font-weight:500;text-decoration:none;
  color:var(--encre-2);padding-block:.45rem;position:relative;white-space:nowrap;
  transition:color var(--transi)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--rive);scale:0 1;transform-origin:left;
  transition:scale var(--transi)}
.nav a:hover,.nav a[aria-current]{color:var(--encre)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.tete__act{display:flex;align-items:center;gap:var(--e-3)}
.tete__cta{display:none}
/* Déclaré AVANT la requête de média qui le masque : à spécificité égale
   c'est la DERNIÈRE règle qui gagne, et le bouton de menu restait affiché
   sur écran large, à côté de la navigation complète. */
.burger{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(22,50,79,.28);border-radius:14px 4px 14px 4px}
@media (min-width:62rem){
  .nav{display:flex} .burger{display:none}
}
/* Le bouton d'appel n'apparaît qu'au-delà de 78 rem : entre 62 et 78 rem la
   navigation occupe déjà toute la largeur disponible, et l'ajouter la faisait
   passer à la ligne — c'est-à-dire doublait la hauteur de l'en-tête collé. */
@media (min-width:78rem){ .tete__cta{display:inline-flex} }
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:1.6px;border-radius:2px;
  background:var(--nuit);
  transition:transform var(--transi),opacity var(--transi)}
.burger__l::before{transform:translateY(-6px)}
.burger__l::after{transform:translateY(4.4px)}
.burger[aria-expanded="true"] .burger__l{background:transparent}
.burger[aria-expanded="true"] .burger__l::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__l::after{transform:translateY(-1.6px) rotate(-45deg)}

.mm{position:fixed;inset:calc(var(--tete-h) + var(--cmp-h,0px)) 0 0;z-index:79;
  background:var(--nuit);color:var(--clair);
  padding:var(--e-6) var(--goutt) var(--e-8);
  overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between}
.mm__liens{display:flex;flex-direction:column}
.mm__liens a{display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--filet-clair);
  text-decoration:none;font-family:var(--f-titre);font-size:var(--t-lg);
  font-weight:500;color:#fff}
.mm__liens a[aria-current]{color:var(--rive-clair)}
.mm__n{font-size:var(--t-xs);color:var(--clair-2);flex:none;min-width:2.2em;
  font-variant-numeric:tabular-nums;font-family:var(--f-texte)}
.mm__pied{margin-top:var(--e-7);display:grid;gap:var(--e-4)}
.mm__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:700;color:var(--rive-clair)}
.mm__tel svg{width:1.1em;height:1.1em}

/* --------------------------------------------------- 8. PREMIER ÉCRAN */
/* Deux temps, et non une bannière : le titre se pose sur l'aplat bleu, et la
   photographie monte du bas de ce même aplat, taillée en arche. La ligne de
   rivage passe à son pied — l'image sort de l'eau. */
.proue{position:relative;background:var(--nuit);color:var(--clair);
  padding-top:clamp(2.75rem,6vw,5.5rem);overflow:hidden}
.proue__in{display:grid;gap:clamp(2rem,4vw,3rem);align-items:end}
@media (min-width:62rem){
  .proue__in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
/* Constaté sur la capture à 1024 : la colonne de texte mesurait 506 px et
   les deux boutons du premier écran en demandaient 517. Onze pixels, et ils
   passaient l'un sous l'autre — à 1440 ils sont côte à côte, à 1024 non, ce
   qui est exactement le genre d'incohérence qu'on ne voit qu'en mesurant la
   largeur intermédiaire. On rend la colonne de texte un peu plus large sur
   cette plage-là, sans toucher au grand écran. */
@media (min-width:62rem) and (max-width:80rem){
  .proue__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr)}
}
.proue__mots{padding-bottom:clamp(3.5rem,8vw,7rem);position:relative;z-index:1}
.proue__t{font-size:var(--t-3xl);font-weight:300;color:#fff;max-width:15ch;
  letter-spacing:-.022em;line-height:1.05}
.proue__c{font-size:var(--t-md);max-width:36rem;color:#E4E9EE}
.proue__media{position:relative;z-index:0}
.proue__ourlet{position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  line-height:0;pointer-events:none}
.proue__ourlet svg{display:block;width:100%;height:clamp(30px,4vw,54px)}
.proue__ourlet path{fill:var(--sable)}

/* En-tête des pages intérieures. Même dispositif, mais l'image ne touche
   pas le fond : c'est un galet posé sur l'eau, pas une arche plantée. */
.rive{background:var(--nuit);color:var(--clair);
  padding-block:clamp(2.5rem,5.5vw,4.5rem) clamp(2.5rem,5.5vw,4.5rem)}
.rive__in{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
@media (min-width:62rem){
  .rive__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.rive__t{font-size:var(--t-2xl);font-weight:300;color:#fff;max-width:17ch;
  letter-spacing:-.02em}
.rive__c{margin-top:var(--e-5);font-size:var(--t-md);max-width:38rem;
  color:#DCE3E9}
.rive__media--f{margin:0}
.prov{display:flex;align-items:center;gap:.45rem;margin-top:var(--e-4);
  font-size:var(--t-sm);font-weight:700;color:var(--balise)}
.prov svg{width:1.1em;height:1.1em;flex:none}

/* ------------------------------------------------------------- 9. BLOCS */
.duo2{display:grid;gap:clamp(1.5rem,4vw,4rem)}
@media (min-width:56rem){
  .duo2{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}
}
.duo2__txt{max-width:var(--largeur-texte)}
.duo2__txt > p + p{margin-top:var(--e-5)}
.horizon{margin-top:clamp(2.5rem,5vw,4.5rem)}

/* Les trois publics. Aucune bordure, aucune ombre portée : un aplat plus
   clair que la section, et la forme fait le reste. */
.pubs{display:grid;gap:clamp(1.1rem,2.4vw,1.85rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.pub{display:block;text-decoration:none;background:var(--sable);
  border-radius:clamp(70px,11vw,120px) 20px clamp(70px,11vw,120px) 20px;
  overflow:hidden;transition:transform var(--transi),background var(--transi)}
.pub:hover{transform:translateY(-4px);background:#FBF7F0}
.pub__corps{display:block;padding:clamp(1.3rem,2.6vw,1.8rem)}
.pub__corps .sur{margin-bottom:var(--e-2)}
.pub__t{display:block;font-family:var(--f-titre);font-size:var(--t-lg);
  font-weight:600;line-height:1.15;margin-bottom:var(--e-3)}
.pub__c{display:block;color:var(--encre-2);font-size:var(--t-sm)}
.pub__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--e-5);
  font-size:var(--t-sm);font-weight:700;color:var(--rive-txt)}
.pub__go svg{width:1em;height:1em;transition:translate var(--transi)}
.pub:hover .pub__go svg{translate:5px 0}

/* -------------------------------------------------------- 10. LE FLEUVE */
/* Le déroulé en quatre temps n'est pas une rangée de cartes : c'est un cours
   d'eau. Sur écran large, l'ondulation traverse la médiane exactement au
   centre des quatre colonnes (x = 125, 375, 625, 875 dans un repère de
   1000) : les pastilles s'y posent sans réglage. Sur téléphone, la même
   idée redressée — un filet qui descend. */
.fleuve{position:relative}
.fleuve__cours{display:none}
.fleuve__etapes{display:grid;gap:clamp(1.6rem,3vw,2.5rem)}
.fl{position:relative;padding-left:2rem}
.fl::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;
  border-radius:50%;background:var(--rive-clair);
  box-shadow:0 0 0 5px var(--nuit)}
.fl::after{content:"";position:absolute;left:6px;top:calc(.5em + 18px);
  bottom:calc(-1 * clamp(1.6rem,3vw,2.5rem));width:1px;
  background:rgba(121,176,190,.4)}
.fl:last-child::after{display:none}
.fl__n{display:block;font-size:var(--t-xs);letter-spacing:.18em;
  color:var(--rive-clair);margin-bottom:var(--e-3);font-weight:700}
.fl__t{font-size:var(--t-md);margin-bottom:var(--e-3)}
.fl__c{font-size:var(--t-sm);color:var(--clair-2)}
@media (min-width:62rem){
  .fleuve__cours{display:block;line-height:0;margin-bottom:0}
  .fleuve__cours svg{display:block;width:100%;height:72px}
  .fleuve__cours path{stroke:var(--rive-clair);stroke-width:1.7;opacity:.8}
  /* La gouttière est mise à ZÉRO et remplacée par un retrait intérieur.
     Ce n'est pas de la coquetterie : avec une gouttière, le centre d'une
     colonne n'est plus à 12,5 % de la largeur, et les pastilles ne tombent
     plus sur l'ondulation — l'écart mesuré atteignait 12 px à 1440. Sans
     gouttière, les quatre centres sont exactement les quatre croisements
     du tracé, à n'importe quelle largeur. */
  .fleuve__etapes{grid-template-columns:repeat(4,1fr);
    column-gap:0;row-gap:0;padding-top:var(--e-4)}
  .fl{padding-left:0;padding-inline:clamp(.7rem,1.4vw,1.35rem);text-align:left}
  .fl::before{left:50%;top:-42px;translate:-50% 0}
  .fl::after{display:none}
}

/* ------------------------------------------------------------ 11. TEASER */
.teaser{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .teaser{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
}
.teaser__txt > p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}
.teaser__go{margin-top:var(--e-6)}

/* ----------------------------------------------------------- 12. ADRESSE */
.adr{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .adr{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
.adr__bloc{margin-block:var(--e-6) var(--e-5);font-size:var(--t-md);line-height:1.75}
/* Le plan est large et bas : le rayon du galet, calculé pour un portrait,
   y mangerait la moitié de la carte. Il en garde l'esprit, à l'échelle. */
.adr__plan,.acces__plan{overflow:hidden;background:#EFE7DA;
  border-radius:clamp(38px,6vw,88px) 20px clamp(38px,6vw,88px) 20px}

/* ------------------------------------------------------- 13. LE PLAN SVG */
/* Une CARTE MARINE. Le plan est un SVG sans aucune couleur en dur : tout se
   décide ici, et c'est le morceau où la palette se prouve. Fond sable, bâti
   en bleu sourd — le bâti n'est pas le sujet —, voies en réserve claire
   comme sur une carte de navigation, eau franchement bleu-vert, et le point
   du cabinet dans l'accent. */
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#F6F1E9}   /* plus clair que les DEUX fonds de section :
                                sans cela la carte se fond dans la page et
                                cesse de se lire comme une planche posée */
.plan__bati{fill:#C2D0DB;stroke:none}
.plan__vert{fill:#D8DFCD}
.plan__eau{fill:#92AEBC;stroke:#92AEBC;stroke-width:3}
.plan__voie{stroke:#F8F3EB}
.plan__voie--majeure{stroke:#FFFDF8}
.plan__voie--pieton{stroke:#E4DBCC}
.plan__tram{stroke:#7C8B99;stroke-width:1.6;stroke-dasharray:6 5}
.plan__libelle text{fill:#53616E;font-size:11px;letter-spacing:.05em;
  font-family:var(--f-texte);font-weight:500}
.plan__halo{fill:var(--rive);opacity:.22}
.plan__halo--2{opacity:.36}
.plan__point{fill:var(--rive)}
.plan__oeil{fill:#F4EEE4}
.plan__ici{fill:var(--nuit);font:600 15px var(--f-titre);letter-spacing:.02em}
.plan__echelle path{stroke:#5D6C7A;stroke-width:1.3;fill:none}
.plan__echelle text,.plan__nord text{fill:#5D6C7A;font:400 11px var(--f-texte)}
.plan__nord path{fill:#5D6C7A}
.plan__credit{fill:#7E8B96;font:400 10px var(--f-texte)}

/* ----------------------------------------------------------- 14. ONGLETS */
.onglets__barre{display:flex;gap:.4rem;flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3.25rem)}
.ong{padding:.7rem 1.35rem;font-size:var(--t-sm);font-weight:700;
  color:var(--encre-2);background:var(--sable-2);
  border-radius:var(--r-pleine);
  transition:color var(--transi),background var(--transi)}
.ong:hover{color:var(--encre);background:#DFD3C0}
.ong.est-actif{color:var(--sable);background:var(--rive-txt)}
.est-onglets .pan{animation:parait 420ms cubic-bezier(.22,1,.36,1)}
@keyframes parait{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* Sans JavaScript, tous les panneaux restent visibles et séparés. */
.pan + .pan{margin-top:var(--sect-y)}
.est-onglets .pan + .pan{margin-top:0}
.pan__tete{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:56rem){
  .pan__tete{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
}
/* Cinq portes : en quatre colonnes la cinquième reste seule et la grille
   boite. Trois colonnes donnent 3 + 2, qui se lit comme une composition. */
.portes{display:grid;gap:clamp(1rem,2.2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
@media (min-width:56rem){ .portes{grid-template-columns:repeat(3,1fr)} }
.porte{background:var(--sable-2);border-radius:var(--r-pave);
  padding:clamp(1.2rem,2.3vw,1.6rem)}
.porte__t{font-family:var(--f-titre);font-size:var(--t-md);font-weight:600;
  margin-bottom:var(--e-3)}
.porte p{font-size:var(--t-sm);color:var(--encre-2)}
.encart{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.4rem);
  background:var(--nuit);color:var(--clair);max-width:48rem;
  border-radius:clamp(48px,8vw,96px) 20px clamp(48px,8vw,96px) 20px}
.encart__t{font-family:var(--f-titre);font-size:var(--t-md);font-weight:600;
  margin-bottom:var(--e-4);color:#fff}
.encart p + p{margin-top:var(--e-4)}
.encart p{font-size:var(--t-sm);color:var(--clair)}

/* ------------------------------------------------- 15. QUESTIONS/RÉPONSES */
.qrs{border-top:1px solid var(--filet)}
.qr{border-bottom:1px solid var(--filet)}
.qr__q{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.2rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-titre);font-size:var(--t-md);font-weight:600}
.qr__q::-webkit-details-marker{display:none}
.qr__ic{width:1.15em;height:1.15em;flex:none;color:var(--rive-txt);margin-top:.2em;
  transition:transform var(--transi)}
.qr[open] .qr__ic{transform:rotate(45deg)}
.qr__r{padding-bottom:1.3rem;max-width:46rem}
.qr__r p{color:var(--encre-2)}
.qr[open] .qr__r{animation:parait 320ms ease}

/* ------------------------------------------------------------ 16. TARIFS */
.tar th,.tar td{text-align:left;padding:.95rem .6rem;
  border-bottom:1px solid rgba(22,50,79,.14)}
.tar thead th{font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--encre-2);font-weight:700;border-bottom-color:rgba(22,50,79,.3)}
.tar tbody th{font-weight:700}
.tar__note{display:block;font-weight:400;font-size:var(--t-xs);color:var(--encre-3);
  margin-top:2px}
.tar__prix{text-align:right;font-weight:700;white-space:nowrap;color:var(--rive-txt)}
.tar td:nth-child(2){color:var(--encre-2);white-space:nowrap}
.tar__mentions{margin-top:var(--e-5);display:grid;gap:.5rem;
  font-size:var(--t-sm);color:var(--encre-2)}
.tar__mentions li{padding-left:1.2em;position:relative}
.tar__mentions li::before{content:"";position:absolute;left:0;top:.72em;
  width:.7em;height:1px;background:var(--rive)}

/* ------------------------------------------------------ 17. PSYCHANALYSE */
.intro__p{font-size:var(--t-md);color:var(--encre-2)}
.intro__p + .intro__p{margin-top:var(--e-5)}
.intro__p:first-child{font-size:var(--t-lg);color:var(--encre);line-height:1.5;
  font-family:var(--f-titre);font-weight:400}
.props{display:grid;gap:clamp(2.25rem,4.5vw,4rem)}
@media (min-width:60rem){ .props{grid-template-columns:repeat(3,1fr)} }
.prop{position:relative;padding-top:var(--e-5)}
.prop::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;
  border-radius:2px;background:var(--rive)}
.prop__txt{margin-top:var(--e-5)}
.prop__txt p + p{margin-top:var(--e-4)}
.prop__txt p{font-size:var(--t-sm);color:var(--encre-2)}
.prop .t2{font-size:var(--t-lg);max-width:16ch}

.metiers{display:grid;gap:clamp(1rem,2.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.metier{background:var(--sable-2);border-radius:var(--r-pave);
  padding:clamp(1.3rem,2.4vw,1.75rem)}
.metier__t{font-family:var(--f-titre);font-size:var(--t-md);font-weight:600}
.metier__r{margin-top:var(--e-2);color:var(--rive-txt);font-size:var(--t-sm);
  font-weight:700}
.metier__c{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--encre-2)}

.cass{display:grid;gap:clamp(1.2rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
/* Quatre cas : en grille automatique la quatrième carte restait seule sur
   une deuxième ligne. Deux colonnes donnent 2 + 2. */
@media (min-width:56rem){ .cass{grid-template-columns:repeat(2,1fr)} }
.cas{padding-top:var(--e-4);border-top:1px solid var(--filet-clair)}
.cas__t{font-size:var(--t-md);margin-bottom:var(--e-3)}
.cas p{font-size:var(--t-sm);color:var(--clair-2)}

.lecs{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.lec__t{display:flex;align-items:center;gap:.5rem;font-family:var(--f-titre);
  font-size:var(--t-md);font-weight:600;
  padding-bottom:var(--e-3);border-bottom:1px solid rgba(22,50,79,.26)}
.lec__ic{width:1.1em;height:1.1em;color:var(--rive-txt);flex:none}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-weight:700}
.lec__auteur{display:block;font-size:var(--t-sm);color:var(--rive-txt);margin-top:1px}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);margin-top:.35rem}

/* ---------------------------------------------------------- 18. HISTOIRE */
.cit{margin-bottom:clamp(2rem,4vw,3rem);padding-left:clamp(1rem,3vw,2rem);
  border-left:2px solid var(--rive)}
.cit__t{font-family:var(--f-titre);font-size:var(--t-xl);font-weight:300;
  line-height:1.2;letter-spacing:-.015em}
.cit__s{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--encre-2);
  letter-spacing:.08em;text-transform:uppercase}

.portrait{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .portrait{grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}
}
.portrait__f figcaption,.divan__f figcaption{margin-top:var(--e-4);
  font-size:var(--t-xs);color:var(--encre-2)}
.portrait__txt p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}

/* La frise. Un filet vertical, les dates en pastille, le texte à droite. */
.fr{position:relative;display:grid;gap:clamp(1.75rem,3.5vw,2.75rem)}
.fr__l{display:grid;gap:.6rem 2rem;position:relative;padding-left:1.6rem}
.fr__l::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;
  border-radius:50%;background:var(--rive-clair)}
.fr__l::after{content:"";position:absolute;left:5px;top:1.7em;
  bottom:calc(-1 * clamp(1.75rem,3.5vw,2.75rem));width:1px;
  background:rgba(121,176,190,.35)}
.fr__l:last-child::after{display:none}
@media (min-width:52rem){
  .fr__l{grid-template-columns:11rem minmax(0,1fr);padding-left:2.2rem;
    align-items:start}
}
.fr__date{display:flex;flex-direction:column;gap:3px}
.fr__date .tech{font-size:var(--t-md);font-weight:700;color:#fff;letter-spacing:.01em;
  font-family:var(--f-titre)}
.fr__lieu{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rive-clair)}
.fr__t{font-size:var(--t-md);margin-bottom:var(--e-2)}
.fr__c p{font-size:var(--t-sm);color:var(--clair-2);max-width:46rem}

.divan{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .divan{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}
.divan__txt p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}
.divan__f{margin:0}

.mots{display:grid;gap:clamp(1.2rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
/* Cinq mots : quatre colonnes laissaient « Acte manqué » orphelin. Trois
   colonnes donnent 3 + 2, qui se lit comme une composition et non comme un
   reste. */
@media (min-width:56rem){ .mots{grid-template-columns:repeat(3,1fr)} }
.mot{padding-top:var(--e-4);border-top:1px solid rgba(22,50,79,.24)}
.mot__t{font-size:var(--t-md);color:var(--rive-txt);margin-bottom:var(--e-3)}
.mot p{font-size:var(--t-sm);color:var(--encre-2)}

/* ----------------------------------------------------- 19. PSYCHANALYSTE */
.parc{display:grid;gap:0;border-top:1px solid rgba(22,50,79,.28)}
.parc__l{display:grid;gap:.2rem 1.5rem;padding:1rem 0;
  border-bottom:1px solid rgba(22,50,79,.14)}
@media (min-width:44rem){ .parc__l{grid-template-columns:14rem minmax(0,1fr)} }
.parc__k{font-weight:700}
.parc__v{color:var(--encre-3);font-style:italic;font-size:var(--t-sm)}

.engs{display:grid;gap:clamp(1.3rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
/* Quatre règles, deux par deux : voir .cass. */
@media (min-width:56rem){ .engs{grid-template-columns:repeat(2,1fr)} }
.eng{padding-top:var(--e-4);border-top:1px solid var(--filet-clair)}
.eng__n{display:block;font-size:var(--t-xs);color:var(--rive-clair);
  margin-bottom:var(--e-3);font-weight:700;letter-spacing:.16em}
.eng__t{font-size:var(--t-md);margin-bottom:var(--e-3)}
.eng p{font-size:var(--t-sm);color:var(--clair-2)}

/* ----------------------------------------------------------- 20. CONTACT */
.ct{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){ .ct{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ct__t{font-family:var(--f-titre);font-size:var(--t-lg);font-weight:600;
  margin-bottom:var(--e-5)}
.ct__t--2{margin-top:var(--e-7)}
.tel-gros{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--f-titre);font-size:var(--t-xl);font-weight:500;
  color:var(--rive-txt);letter-spacing:-.01em;margin-bottom:var(--e-5);
  transition:color var(--transi)}
.tel-gros:hover{color:var(--nuit)}
.tel-gros svg{width:.8em;height:.8em}
.ct__appel p{color:var(--encre-2);max-width:34rem}
.ct__rappel{display:flex;align-items:center;gap:.45rem;margin-top:var(--e-4);
  font-size:var(--t-sm)}
.ct__rappel svg{width:1.1em;height:1.1em;color:var(--rive-txt);flex:none}
.ct__addr{font-style:normal;line-height:1.8}
.hor{display:grid;gap:0;border-top:1px solid rgba(22,50,79,.14)}
.hor__l{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid rgba(22,50,79,.14);font-size:var(--t-sm)}
.hor__l--off{color:var(--encre-3)}
.hor dt{font-weight:500}

.acces{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (min-width:60rem){
  .acces{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.modes{display:grid;gap:var(--e-4)}
.mode{display:flex;gap:var(--e-4);align-items:flex-start;padding-bottom:var(--e-4);
  border-bottom:1px solid rgba(22,50,79,.14)}
.mode:last-child{border-bottom:0}
.mode__ic{width:1.45rem;height:1.45rem;flex:none;color:var(--rive-txt);margin-top:.15em}
.mode strong{display:block;font-size:var(--t-sm)}
.mode span{display:block;font-size:var(--t-sm);color:var(--encre-2)}
.acces__it-t{margin-top:var(--e-6);font-size:var(--t-xs);letter-spacing:.17em;
  text-transform:uppercase;color:var(--encre-2);font-weight:700}
.acces__note{margin-top:var(--e-5);font-size:var(--t-xs);color:var(--encre-3);
  max-width:32rem;line-height:1.65}

.form{display:grid;gap:var(--e-5)}
.ch{display:grid;gap:.35rem}
.ch__l{font-size:var(--t-sm);font-weight:700}
.ch__req{color:var(--rive-txt);margin-left:.1em}
.ch__aide{font-size:var(--t-xs);color:var(--encre-2)}
.ch__i{width:100%;padding:.8rem 1rem;background:var(--sable);
  border:1px solid rgba(22,50,79,.28);border-radius:14px 4px 14px 4px;
  font-size:var(--t-base);
  transition:border-color var(--transi),box-shadow var(--transi)}
.ch__i:focus{outline:0;border-color:var(--rive-txt);
  box-shadow:0 0 0 3px rgba(47,110,126,.22)}
textarea.ch__i{resize:vertical;min-height:8rem}
.form__rgpd{font-size:var(--t-xs);color:var(--encre-2);max-width:36rem;line-height:1.65}
.form__act{margin-top:var(--e-2)}
/* Le retour de démonstration. Il DIT qu'il n'a rien envoyé : une maquette
   qui laisse croire à un message parti fait rater un vrai rendez-vous. */
.form__demo{padding:1.1rem 1.3rem;background:var(--nuit);color:var(--clair);
  border-radius:20px 4px 20px 4px;font-size:var(--t-sm)}
.form__demo strong{display:block;margin-bottom:.25rem;color:#fff;
  font-family:var(--f-titre);font-size:var(--t-md);font-weight:600}
.form__demo-note{display:block;margin-top:.6rem;padding-top:.6rem;
  border-top:1px solid var(--filet-clair);font-size:var(--t-xs);color:var(--clair-2)}

/* -------------------------------------------------------- 21. APPEL FINAL */
/* La seule surface où l'accent devient un aplat : une bande de mer avant le
   fond du bleu. Le texte y est blanc — le sable n'y tient qu'à 5,0:1, le
   blanc monte à 5,7:1, et rien ne justifie de s'en priver. */
.appel{background:var(--rive);color:#fff;
  padding-block:clamp(3rem,6vw,5.5rem);text-align:center}
.appel .sur--appel{color:#E8F1F3}
.appel__t{font-size:var(--t-xl);font-weight:400;color:#fff;max-width:20ch;
  margin-inline:auto}
.appel__c{margin-top:var(--e-4);color:#E8F1F3;max-width:34rem;margin-inline:auto}
.appel .grp{justify-content:center}
.appel .btn--clair{--fg:var(--rive-txt)}
.appel__adr{margin-top:var(--e-6);font-size:var(--t-sm);color:#E8F1F3;
  display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  justify-content:center}
.appel__adr svg{width:1.05em;height:1.05em}

/* ------------------------------------------------------------ 22. URGENCE */
/* Le fond du bleu. Les numéros portent le seul ton chaud du site : un numéro
   d'urgence de la même couleur que le reste ne serait plus un signal. */
.urg{background:var(--nuit-2);color:var(--clair-2);
  padding-block:clamp(2.75rem,5vw,4.25rem)}
.urg__in{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:56rem){
  .urg__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
}
.urg__t{font-family:var(--f-titre);font-size:var(--t-lg);font-weight:500;color:#fff;
  display:flex;align-items:center;gap:.55rem}
.urg__ic{width:1.05em;height:1.05em;color:var(--balise);flex:none}
.urg__chapo{margin-top:var(--e-4);color:var(--clair-2);font-size:var(--t-sm);
  max-width:32rem}
.urg__liste{display:grid;gap:var(--e-4)}
.urg__l{display:flex;gap:var(--e-4);align-items:baseline;
  padding-bottom:var(--e-4);border-bottom:1px solid rgba(244,238,228,.12)}
.urg__l:last-child{border-bottom:0;padding-bottom:0}
.urg__num{flex:none;min-width:8.6rem;font-weight:700;color:var(--balise)}
.urg__c strong{display:block;color:#fff;font-weight:700}
.urg__c{font-size:var(--t-sm);color:var(--clair-2)}

/* ---------------------------------------------------------------- 23. PIED */
/* Le pied prolonge le bloc d'urgence sans rupture : la page s'enfonce, elle
   ne se referme pas sur un cartouche clair. */
.pied{background:var(--nuit-2);color:var(--clair-2);
  border-top:1px solid rgba(244,238,228,.12);
  padding-block:clamp(2.5rem,5vw,4rem) var(--e-6)}
.pied__in{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){ .pied__in{grid-template-columns:1.1fr .7fr 1.2fr} }
.pied__nom{font-family:var(--f-titre);font-size:var(--t-md);font-weight:600;color:#fff}
.pied__role{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--clair-2);margin-top:3px}
.pied__adr{font-style:normal;margin-top:var(--e-5);line-height:1.8;
  font-size:var(--t-sm);color:var(--clair)}
.pied__adr a{color:var(--rive-clair);text-decoration:none;font-weight:700}
.pied__adr a:hover{text-decoration:underline}
.pied__sr{margin-top:var(--e-3);font-size:var(--t-xs);color:var(--clair-2)}
.pied__t{font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;
  color:var(--clair-2);font-family:var(--f-texte);font-weight:700;
  margin-bottom:var(--e-4)}
.pied__liens{display:grid;gap:.5rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none;color:var(--clair-2)}
.pied__liens a:hover{color:#fff}
.pied__legal{display:grid;gap:.65rem;font-size:var(--t-xs);color:var(--clair-2);
  line-height:1.65;max-width:34rem}
.pied__bas{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3rem);padding-top:var(--e-5);
  border-top:1px solid rgba(244,238,228,.12);font-size:var(--t-xs);
  color:var(--clair-2)}

/* --------------------------------------------------- 24. BARRE TÉLÉPHONE */
/* Sur ce type de site la majorité des visites vient d'un téléphone, souvent
   le soir. Le numéro doit rester à portée de pouce sans avoir à remonter. */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m8{--barre-h:64px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.6rem var(--goutt) calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(15,36,56,.94);border-top:1px solid rgba(244,238,228,.14)}
  @supports (backdrop-filter:blur(10px)){
    .barre-tel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  }
  .barre-tel__a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:2.9rem;background:var(--sable);color:var(--nuit);
    border-radius:var(--r-pleine);text-decoration:none;font-weight:700;
    font-size:var(--t-sm)}
  .barre-tel__a svg{width:1.15em;height:1.15em}
  /* La barre d'appel est fixe : elle se pose PAR-DESSUS le bas de l'écran.
     Le premier écran doit lui réserver sa hauteur, sinon l'ondulation et le
     pied de l'arche passent dessous. */
  .proue{padding-bottom:var(--barre-h);padding-top:1.6rem}
  .proue__ourlet{bottom:calc(var(--barre-h) - 1px)}
  /* Mesuré sur capture : le bas du second bouton tombait à 790 px, la barre
     d'appel commence à 788. Deux pixels suffisaient à le rogner. On resserre
     le filet et le groupe de boutons ; le titre, lui, ne bouge pas. */
  .proue .filet{margin-block:1rem}
  .proue .grp{margin-top:1.3rem}
}

@media print{
  .tete,.mm,.barre-tel,.appel,.ourlet,.proue__ourlet{display:none}
  body.m8{background:#fff}
  .js [data-anim]{opacity:1 !important;translate:none !important}
  /* Le duotone est un effet d'écran : à l'impression il mangerait l'encre
     sans rien apporter. */
  .duo::before,.duo::after{display:none}
  .duo img{filter:grayscale(1) contrast(1.05)}
}