/* ==========================================================================
   Office notarial de Maître Philippe Rumen : site.css (Nicolam Studio)
   Sobre et contemporain : beaucoup de crème et de respiration, une serif éditoriale pour les titres,
   le pétrole porte l'action et l'autorité, le cognac (couleur de la ville) réchauffe les repères.
   Aucune bibliothèque CSS chargée : tout le style du site vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : Newsreader 600, Source Sans 3 400 / 600 / 700, latin ---------- */
@font-face{ font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/newsreader-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/source-sans-3-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/source-sans-3-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/source-sans-3-700-latin.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs : deux teintes par couleur */
  --bg:#FAF7F2;               /* A : crème, fond ; footer uni */
  --primary-light:#E2ECEE;    /* B : pétrole clair, fonds de sections, placeholders, filets teintés */
  --primary:#1D4552;          /* pétrole soutenu : boutons, lien actif, sur-titres, titres de groupe du footer, icônes, barre d'annonce, carte CTA */
  --secondary-light:#F4E7D7;  /* cognac clair */
  --secondary:#A35F24;        /* cognac soutenu : repères (chiffres, ronds de frise, positionnement), 4,66:1 sur crème */
  --ink:#1C2228;              /* texte, 15:1 sur crème */
  --ink-2:#5A6168;            /* texte secondaire, 5,9:1 sur crème (AA) */
  --stars:#F2B01E;            /* étoiles Google, seul or du site */
  --hairline:rgba(28,34,40,.12);
  --surface:#FFFDF9;          /* fond des cartes, distinct du fond de section */
  --mid:#60523B;              /* couleur du milieu du dégradé signature (ronds 2 et 3 de la frise) */
  /* Dégradé signature : du cognac vers le pétrole (finit sur la principale) */
  --sig-90:linear-gradient(90deg,#A35F24,#1D4552);
  --sig-135:linear-gradient(135deg,#A35F24,#1D4552);
  --btn-sig:linear-gradient(135deg,#A35F24 0%,#8B5A2C 40%,#1D4552 100%);     /* bouton plein : point à 40 % */
  --btn-light:linear-gradient(135deg,#E2ECEE 0%,#E7EFF1 40%,#FFFFFF 100%);   /* bouton clair : pétrole clair → blanc, même angle, même point */
  /* Notes de maquette, type Note : carmin + icône info ; erreurs de formulaire dans le même carmin */
  --note-ink:#9E1F42; --note-txt:#7A2038; --note-bg:rgba(158,31,66,.06); --note-bd:rgba(158,31,66,.32);
  --error:#9E1F42;
  /* Espacements : échelle unique */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons : boutons 4px, cartes et panneaux 6px, placeholders 6px, pastilles 999px */
  --r-btn:4px; --r-card:6px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Barre d'annonce + header (dans le flux, header sticky) */
  --ann-h:40px; --hdr-h:84px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  --lh:52px;    /* hauteur du logo (header et footer) */
  --bm-h:48px;  /* hauteur de la marque « Notaires de France » */
  /* Typographie */
  --f-title:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1-home:clamp(2.4rem,1.6rem + 3.2vw,4rem);
  --fs-h1:clamp(2rem,1.5rem + 2.2vw,3.2rem);
  --fs-h2:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  --fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --fs-body:clamp(1rem,.95rem + .2vw,1.0625rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-over:.8125rem;
  --fs-caption:.875rem;
  /* Ombre unique, brun chaud, niveau discret */
  --sh-card:0 1px 2px rgba(90,58,30,.14),0 6px 18px rgba(90,58,30,.06),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-hover:0 1px 2px rgba(90,58,30,.14),0 10px 24px rgba(90,58,30,.09),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(90,58,30,.1),0 3px 10px rgba(90,58,30,.05);
  /* Mouvement : ease-in-out partout ; 0,4 s est le minimum (états .6 s, apparition .9 s, zoom 1,2 s, dépliage .5 s, FAQ .4 s) */
  --ease:ease-in-out; --dur:.6s; --dur-in:.9s; --dur-zoom:1.2s; --dur-open:.5s; --dur-faq:.4s;
  /* Tickers : exactement les mêmes réglages pour les deux (barre d'annonce, avis) */
  --tk-lead:96px; --tk-gap:24px; --tk-fade:24px;
}
@media (max-width:1023px){ :root{ --hdr-h:76px; --lh:46px; --bm-h:44px; } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-lead:64px; --ann-h:36px; --hdr-h:68px; --lh:40px; --bm-h:38px; } }
@media (max-width:359px){ :root{ --lh:34px; --bm-h:32px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{ margin:0; background:var(--bg); color:var(--ink); overflow-x:clip; font-family:var(--f-body); font-weight:400;
  font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; letter-spacing:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; }
p{ text-wrap:pretty; }
strong{ font-weight:700; }
[hidden]{ display:none !important; }
::selection{ background:var(--primary-light); color:var(--primary); }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nw{ white-space:nowrap; }

/* Titres en Newsreader 600, tracking serré ; aligné à gauche : pretty ; balance seulement sur un titre centré */
h1,h2,h3{ font-family:var(--f-title); font-weight:600; color:var(--ink); text-wrap:pretty; letter-spacing:-.015em; }
.center h2,.hero h1,.phero h1,.cta h2{ text-wrap:balance; }
h1{ font-size:var(--fs-h1); line-height:1.12; }
h2{ font-size:var(--fs-h2); line-height:1.2; }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em; }
h4{ font-family:var(--f-body); font-weight:700; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:700; font-size:var(--fs-over); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--ink-2); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding:96px 0; }
.section > .container{ position:relative; z-index:1; }
/* grain 3 % sur les fonds de section uniquement ; les composants restent lisses au-dessus */
.section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section.is-tight{ padding-top:48px; }   /* deux sections d'un même thème se lisent comme un tout */
@media (max-width:767px){ .section{ padding-block:64px; } .section.is-tight{ padding-top:32px; } }
/* flux des fonds : A = #FAF7F2, B = #E2ECEE (attribués par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#FAF7F2,#E2ECEE); }
.bg-ba{ background:linear-gradient(180deg,#E2ECEE,#FAF7F2); }
.bg-aba{ background:linear-gradient(180deg,#FAF7F2,#E2ECEE 50%,#FAF7F2); }
.bg-bab{ background:linear-gradient(180deg,#E2ECEE,#FAF7F2 50%,#E2ECEE); }

.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; }
.shead.center{ align-items:center; text-align:center; }
.shead.center h2,.shead.center .lead{ max-width:760px; }
.shead.center .lead{ text-wrap:balance; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }

/* ---------- Boutons : deux niveaux (plein au dégradé signature, ghost bordé), coins 4px, icône à droite dans la couleur du libellé ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-body);
  font-weight:600; font-size:1rem; line-height:1.2; cursor:pointer;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease),background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.btn .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
/* primaire : dégradé signature à 135°, point à 40 %, texte crème (4,66:1 au coin cognac) ; survol un cran plus bas */
.btn--primary{ background:var(--btn-sig); color:var(--bg); border:0; padding:13.5px 25.5px; box-shadow:0 4px 12px rgba(90,58,30,.18); }
.btn--primary:hover{ filter:brightness(.9); box-shadow:0 8px 18px rgba(29,69,82,.24); }
.btn--primary:active{ filter:brightness(.82); }
/* secondaire : ghost bordé de pétrole, bordure franche */
.btn--ghost{ color:var(--primary); border-color:var(--primary); background:transparent; }
.btn--ghost:hover{ background:rgba(29,69,82,.07); }
.btn--ghost:active{ background:rgba(29,69,82,.12); }
/* sur la carte CTA (fond pétrole) : primaire inversé au dégradé clair, texte pétrole ; ghost à bordure claire forte */
.btn--inv{ background:var(--btn-light); color:var(--primary); border:0; padding:13.5px 25.5px; box-shadow:0 4px 14px rgba(8,24,30,.28); }
.btn--inv:hover{ filter:brightness(.96); box-shadow:0 8px 20px rgba(8,24,30,.34); }
.btn--inv:active{ filter:brightness(.92); }
.btn--ghost.btn--on-dark{ color:var(--bg); border-color:rgba(250,247,242,.88); }
.btn--ghost.btn--on-dark:hover{ background:rgba(250,247,242,.12); }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon l'un sous l'autre en pleine largeur (classe posée par site.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; align-self:stretch; }
.btn-row.is-stacked > .btn{ width:100%; }

/* ---------- Barre d'annonce : dégradé vertical du pétrole (haut plus clair → bas plus foncé), opaque, sans lien ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,#2C5F70 0%,#1D4552 100%); color:var(--bg); }
.annonce__in{ width:100%; max-width:var(--container-header); margin-inline:auto; padding-inline:var(--pad); overflow:hidden; }
.annonce .tk{ justify-content:center; }
.annonce__set{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--tk-gap); flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:600; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:16px; height:16px; }
.annonce li.sep{ opacity:.7; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:911px){   /* bascule mesurée sur la ligne réelle : 912px nécessaires (voir site.js BP_ANN) ; en dessous, ticker, vide de lecture devant CHAQUE copie */
  .annonce__in{ padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .annonce .tk{ justify-content:flex-start; width:max-content; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:flex; }
  .annonce__set{ padding-left:var(--tk-lead); }
  .annonce li{ font-size:.875rem; }
}

/* ---------- Ticker (mécanique commune) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.run[data-row="right"]{ animation-name:tk-r; }
.tk.paused{ animation-play-state:paused !important; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tk-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes tk-in{ from{ transform:translateX(var(--tk-lead)); } to{ transform:translateX(0); } }   /* avis : entrée unique depuis le vide de lecture */
.tk__set{ display:flex; gap:var(--tk-gap); padding-left:var(--tk-lead); flex:0 0 auto; }
/* avis : pas de vide de lecture dans la boucle ; chaque copie porte la gouttière après sa dernière carte, le raccord garde l'écart des cartes */
.rtk .tk__set{ padding-left:0; padding-right:var(--tk-gap); }
.rtk:not(.is-seen) .tk.run{ animation-play-state:paused !important; }   /* démarre à l'arrivée dans l'écran (site.js) */

/* ---------- Header : verre crème densifié, un seul état, séparation par l'ombre seule ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(250,247,242,.95),rgba(250,247,242,.8));
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 2px rgba(90,58,30,.08),0 8px 22px rgba(90,58,30,.09); }
/* menu ouvert : le header passe opaque EN FONDU (voile couleur de fond), le contenu reste au-dessus */
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-open) var(--ease); }
.hdr.is-open .hdr__bar::after{ opacity:1; }
.hdr__in{ max-width:var(--container-header); height:100%; display:flex; align-items:center; gap:24px; flex-wrap:nowrap; position:relative; z-index:1; }
.hdr__brand,.foot__brand{ flex:0 0 auto; display:flex; align-items:center; }
.hdr__logo,.foot__logolink{ display:flex; align-items:center; min-height:44px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover,.foot__logolink:hover{ opacity:.82; }
.hdr__img,.foot__logo{ height:var(--lh); width:auto; max-width:none; }
/* bloc-marque : logo de l'office + marque monochrome « Notaires de France », séparés par un filet vertical */
.bmark{ flex:0 0 auto; display:flex; align-items:center; margin-left:20px; padding-left:20px; border-left:1px solid rgba(28,34,40,.18); }
.bmark img{ height:var(--bm-h); width:auto; max-width:none; }
.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; flex-wrap:nowrap; }
.nav__link{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; min-height:44px; position:relative;
  padding:10px 14px; border-radius:var(--r-btn); font-weight:600; font-size:1rem; line-height:1.2; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:rgba(29,69,82,.07); color:var(--primary); }
/* lien actif : pétrole et souligné d'un filet, jamais par la couleur seule */
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--primary); }
.nav__link::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1.5px; background:var(--primary);
  transform:scaleX(0); transition:transform var(--dur) var(--ease); }
.nav__link[aria-current="page"]::after,.nav__toggle[data-current]::after{ transform:scaleX(1); }
.nav__toggle[data-current]::after{ right:36px; }
.nav__link .ic{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.nav__has{ position:relative; }
.nav__toggle[aria-expanded="true"] .ic{ transform:rotate(180deg); }
/* overlay desktop : fond crème plein, titre et description empilés, aucune icône */
.submenu{ position:absolute; top:calc(100% + 18px); left:50%; min-width:320px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg); border-radius:var(--r-card); box-shadow:var(--sh-card);
  opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease); }
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-20px; height:20px; }
.nav__has:hover .submenu,.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:block; padding:12px 16px; border-radius:var(--r-btn); color:var(--ink); transition:background-color var(--dur) var(--ease); }
.submenu a:hover{ background:rgba(29,69,82,.07); }
.submenu a[aria-current]{ background:var(--primary-light); }
.submenu__t{ display:block; font-weight:700; font-size:1rem; line-height:1.35; white-space:nowrap; transition:color var(--dur) var(--ease); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--primary); }
.submenu__d{ display:block; margin-top:2px; font-size:var(--fs-caption); line-height:1.4; color:var(--ink-2); white-space:nowrap; }
.hdr__cta{ flex:0 0 auto; }
.burger{ display:none; flex:0 0 auto; margin-left:auto; width:44px; height:44px; border-radius:var(--r-btn);
  border:1.5px solid rgba(28,34,40,.22); align-items:center; justify-content:center; color:var(--ink);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.burger:hover{ background:rgba(29,69,82,.07); border-color:var(--primary); color:var(--primary); }
.burger .ic{ width:22px; height:22px; }
.burger .ic-x,.hdr.is-open .burger .ic-menu{ display:none; }
.hdr.is-open .burger .ic-x{ display:block; }
.hdr__panel{ display:none; }
@media (max-width:1109px){   /* bascule burger mesurée sur le contenu réel : 1110px nécessaires (logo + bloc-marque + liens + CTA), voir site.js BP_NAV */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  /* le panneau vit DANS le header, en overlay sous la barre : il ne pousse jamais la page ; il se déplie à sa hauteur exacte */
  .hdr__panel{ display:grid; grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 12px 24px rgba(90,58,30,.12); visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .hdr__scroll{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
  .hdr.is-open .hdr__scroll{ overflow-y:auto; }
  .hdr__panel-in{ display:flex; flex-direction:column; gap:4px; padding-block:16px 32px; }
  .hdr__panel a:not(.btn),.macc__btn{ display:flex; align-items:center; min-height:48px; padding:12px 8px; border-radius:var(--r-btn);
    font-weight:600; font-size:1.0625rem; line-height:1.3; color:var(--ink); text-align:left;
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),padding-left var(--dur) var(--ease); }
  .hdr__panel a:not(.btn):hover,.macc__btn:hover{ background:rgba(29,69,82,.07); color:var(--primary); padding-left:14px; }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--primary); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:18px; height:18px; transition:transform var(--dur-open) var(--ease); }
  .macc.is-open .macc__btn .ic{ transform:rotate(180deg); }
  .macc__panel{ display:grid; grid-template-rows:0fr; visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  /* sous-liens alignés à gauche comme les liens de premier niveau, en retrait ; le titre seul, sans description */
  .hdr__panel .macc__in a:not(.btn){ display:block; padding:12px 8px 12px 24px; font-weight:400; font-size:1rem; }
  .hdr__panel .macc__in a:not(.btn):hover{ padding-left:30px; }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}
@media (max-width:767px){ .bmark{ margin-left:12px; padding-left:12px; } .hdr__in{ gap:16px; } }

/* ---------- Placeholder image : logo du client (fronton) centré, radial clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(80% 80% at 50% 50%,#FAF7F2 0%,#E2ECEE 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.16;
  background:url("../img/logo/rumen-logo-fronton-icone.svg") no-repeat center 46% / min(28%,120px) auto; }
.ph__cap{ position:absolute; left:16px; bottom:16px; z-index:1; width:max-content; max-width:calc(100% - 32px);
  padding:6px 12px; border-radius:var(--r-pill); background:rgba(250,247,242,.94); color:var(--ink-2);
  font-size:var(--fs-caption); line-height:1.4; box-shadow:var(--sh-soft); }
@media (max-width:767px){ .ph__cap{ left:12px; bottom:12px; max-width:calc(100% - 24px); font-size:.8125rem; } }

/* ---------- Hero d'accueil : plein écran, placeholder radial + logo, contenu centré ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:calc(100svh - var(--stack-h)); padding:96px var(--pad); }
.hero__ph{ position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 75% at 50% 48%,#FAF7F2 0%,#FAF7F2 22%,#E2ECEE 100%); }
.hero__ph::before{ opacity:.05; background-size:min(36vh,260px) auto; background-position:center 48%; }
.hero__ph .ph__cap{ left:24px; bottom:24px; }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ font-size:var(--fs-h1-home); line-height:1.12; max-width:100%; }
.h1-grad{ background:var(--sig-90); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.06em; }
.hero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:100%; }
.hero__cta{ justify-content:center; margin-top:8px; }
/* Pastille Google, version claire (texte foncé) sur fond clair : verre, une seule ligne, s'arrête aux étoiles */
.gpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:var(--r-pill);
  background:rgba(250,247,242,.6); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(28,34,40,.1); box-shadow:var(--sh-soft); white-space:nowrap; }
.gpill .g-g{ width:20px; height:20px; flex:0 0 auto; }
.gpill__n{ font-family:var(--f-body); font-weight:700; font-size:1.0625rem; line-height:1; color:var(--stars); font-variant-numeric:tabular-nums lining-nums; }
/* étoiles : le seul jaune du site ; la cinquième remplie à 90 % (jaune par-dessus une étoile grisée) */
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; color:var(--stars); }
.star{ width:var(--sz); height:var(--sz); flex:0 0 auto; }
.star-p{ position:relative; display:block; width:var(--sz); height:var(--sz); flex:0 0 auto; }
.star-p > .star{ color:rgba(28,34,40,.2); }
.star-p__fill{ position:absolute; inset:0; clip-path:inset(0 10% 0 0); color:var(--stars); }
.star-p__fill .star{ color:var(--stars); }
.gpill .stars{ --sz:16px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .hero__ph .ph__cap{ left:16px; bottom:16px; }
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.9375rem; }
  .gpill .stars{ --sz:13px; }
}
@supports (height:100lvh){
  .hero{ min-height:calc(100lvh - var(--stack-h)); padding-bottom:calc(96px + 100lvh - 100svh); }
  .hero__ph .ph__cap{ bottom:calc(24px + 100lvh - 100svh); }
  @media (max-width:767px){ .hero{ padding-bottom:calc(64px + 100lvh - 100svh); } .hero__ph .ph__cap{ bottom:calc(16px + 100lvh - 100svh); } }
}

/* ---------- Hero de page : radial clair + logo, H1 + tagline seuls ; la section suivante démarre sur le centre (#FAF7F2) ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:calc((100svh - var(--stack-h)) * .6); padding:96px var(--pad);
  background:radial-gradient(75% 95% at 50% 50%,#FAF7F2 0%,#FAF7F2 26%,#E2ECEE 100%); }
@supports (height:100lvh){ .phero{ min-height:calc((100lvh - var(--stack-h)) * .6); } }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.06;
  background:url("../img/logo/rumen-logo-fronton-icone.svg") no-repeat center / min(30vh,240px) auto; }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:100%; text-wrap:balance; }
@media (max-width:767px){ .phero{ padding-block:64px; } .phero::before{ background-size:min(52%,180px) auto; } }

/* ---------- Notes de maquette, type Note : carte carmin + icône info ---------- */
.note-wrap{ margin-top:48px; }
.mnote{ display:flex; gap:16px; align-items:flex-start; max-width:760px; margin-inline:auto; padding:16px 24px; border-radius:var(--r-card);
  border:1px solid var(--note-bd); background:linear-gradient(var(--note-bg),var(--note-bg)),var(--bg); color:var(--note-ink); }
.mnote .ic{ width:22px; height:22px; margin-top:1px; }
.mnote__label{ display:block; font-weight:700; font-size:var(--fs-over); letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:var(--note-txt); }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- S2 Vos démarches : grille de cartes image de même taille, trois colonnes ---------- */
.dgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.dcard{ display:flex; flex-direction:column; min-width:0; background:var(--surface); color:var(--ink); border-radius:var(--r-card);
  box-shadow:var(--sh-card); cursor:pointer; }
.dcard__img{ position:relative; flex:0 0 auto; }
.dcard__img::before{ content:""; display:block; padding-top:66.667%; }   /* 3/2, taille fixe */
.dcard__clip{ position:absolute; inset:0; overflow:hidden; border-radius:var(--r-card) var(--r-card) 0 0; }
.dcard__clip .ph{ position:absolute; inset:0; transition:transform var(--dur-zoom) var(--ease); }
.dcard__body{ flex:1 1 auto; display:flex; flex-direction:column; padding:32px; }
.dcard__txt{ display:flex; flex-direction:column; gap:8px; }
.dcard__t{ min-height:0; }   /* les trois titres tiennent sur une ligne : pas de hauteur réservée, pas de fossé titre / texte */
.dcard__txt p{ color:var(--ink-2); line-height:1.5; }
.dcard__more{ margin-top:auto; padding-top:24px; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-weight:600; color:var(--primary); }
.dcard__more .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
/* un seul effet au survol : zoom lent de l'image (+ la flèche qui avance), jamais de montée de la carte */
.dcard:hover .dcard__clip .ph,.dcard:focus-visible .dcard__clip .ph{ transform:scale(1.03); }
.dcard:hover .dcard__more .ic,.dcard:focus-visible .dcard__more .ic{ transform:translateX(4px); }
/* tablette : une colonne, carte compacte en rangée, image 3/2 à gauche sur 40 %, texte à droite centré verticalement */
@media (max-width:1023px){
  .dgrid{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .dcard{ flex-direction:row; align-items:center; }
  .dcard__img{ flex:0 0 40%; }   /* taille fixe en 3/2, centrée face au texte */
  .dcard__clip{ border-radius:var(--r-card) 0 0 var(--r-card); }
  .dcard__body{ flex:1 1 0; min-width:0; padding:24px; }
  .dcard__t{ min-height:0; }
  .dcard__more{ padding-top:8px; }
}
/* mobile : une carte par ligne, image en haut pleine largeur, texte dessous */
@media (max-width:767px){
  .dcard{ flex-direction:column; align-items:stretch; }
  .dcard__img{ flex:0 0 auto; align-self:stretch; }
  .dcard__clip{ border-radius:var(--r-card) var(--r-card) 0 0; }
  .dcard__body{ padding:32px; }
  .dcard__more{ padding-top:24px; }
}

/* ---------- S3 L'étude : split image/texte avec chevauchement, panneau texte sur l'image, portrait à gauche ---------- */
/* image 0 → 68,5 %, panneau 58 → 100 % (42 % du conteneur), recouvrement = un quart du panneau (10,5 %) */
.split{ display:grid; grid-template-columns:minmax(0,58fr) minmax(0,10.5fr) minmax(0,31.5fr); align-items:stretch; }
.split__img{ grid-column:1 / 3; grid-row:1; position:relative; min-height:520px; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.split__img .ph{ position:absolute; inset:0; }
.split__img .ph::before{ background-size:min(24%,140px) auto; background-position:38% 46%; }   /* le motif reste dans la partie visible de l'image */
.split__panel{ grid-column:2 / 4; grid-row:1; align-self:center; position:relative; z-index:1; margin-block:48px;
  display:flex; flex-direction:column; align-items:flex-start; padding:48px; background:var(--bg); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.split__panel h2{ margin-top:16px; }
.split__panel > p{ margin-top:24px; color:var(--ink-2); }
.ilist{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ilist li{ display:flex; align-items:flex-start; gap:12px; line-height:1.5; }
.ilist .ic{ color:var(--primary); margin-top:2px; }
.split__panel .btn{ margin-top:32px; }
@media (max-width:1023px){
  .split{ display:block; }
  .split__img{ height:380px; min-height:0; }
  .split__img .ph::before{ background-position:center 34%; }
  .split__img .ph__cap{ top:16px; bottom:auto; }   /* le panneau recouvre le bas de l'image : la légende remonte */
  .split__panel{ margin:-96px 32px 0; padding:40px; }
}
@media (max-width:767px){
  .split__img{ height:300px; }
  .split__img .ph__cap{ top:12px; }
  .split__panel{ margin:-48px 16px 0; padding:32px 24px; }   /* marges négatives verticales seulement */
}

/* ---------- S4 Le déroulé : en-tête à gauche, frise numérotée verticale à droite, ronds ---------- */
.deroule{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:64px; align-items:start; }
.deroule .shead{ margin-bottom:0; }
@media (max-width:1023px){ .deroule{ display:block; } .deroule .shead{ margin-bottom:32px; } }
.frise{ position:relative; }
.frise__list{ list-style:none; margin:0; padding:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:32px; }
.frise__st{ display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; align-items:start; }
.frise__txt{ display:flex; flex-direction:column; gap:8px; padding-top:5px; }
.frise__txt p{ color:var(--ink-2); }
.frise__n{ position:relative; isolation:isolate; width:40px; height:40px; border-radius:50%; border:2px solid; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:700; font-size:1rem; line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease); }
/* chaque rond prend la couleur de la ligne à son niveau : cognac au premier, couleur du milieu aux suivants, le dernier PLEIN du dégradé à 135° */
.frise__st:nth-child(1) .frise__n{ border-color:var(--secondary); color:var(--secondary); }
.frise__st:nth-child(2) .frise__n,.frise__st:nth-child(3) .frise__n{ border-color:var(--mid); color:var(--mid); }
.frise__st:last-child .frise__n{ border-color:transparent; background:transparent; color:var(--bg); }
.frise__st:last-child .frise__n::before{ content:""; position:absolute; inset:-2px; z-index:-1; border-radius:50%; background:var(--sig-135);
  transition:opacity .4s var(--ease); }
/* la ligne : 2px, du centre du premier rond au centre du dernier (calée par site.js), dévoilée par clip-path, sans transition */
.frise__line{ position:absolute; z-index:0; left:19px; top:20px; width:2px; height:var(--fl-h,0px); pointer-events:none; }
.frise__fill{ position:absolute; inset:0; background:linear-gradient(180deg,#A35F24,#1D4552); will-change:clip-path; }
/* rond éteint tant que la ligne ne l'a pas atteint, rallumé au passage */
.js .frise.is-scroll .frise__st:not(.is-on) .frise__n{ border-color:rgba(28,34,40,.2); color:var(--ink-2); }
.js .frise.is-scroll .frise__st:last-child:not(.is-on) .frise__n{ background:var(--bg); }
.js .frise.is-scroll .frise__st:last-child:not(.is-on) .frise__n::before{ opacity:0; }
/* chaque étape apparaît au passage de la ligne, puis reste (pas le reveal classique) */
html.js-ready .frise.is-scroll .frise__st:not(.is-vu){ opacity:0; transform:translateY(28px); }
html.fx-on .frise.is-scroll .frise__st{ transition:opacity .6s var(--ease),transform .6s var(--ease); }

/* ---------- S5 Avis : ticker deux rangées en sens inverse, cartes au format notaire ---------- */
.rating{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:8px; }
.rating__l1{ display:flex; align-items:center; gap:12px; }
.rating__n{ font-family:var(--f-body); font-weight:700; font-size:2.75rem; line-height:1; letter-spacing:-.01em;
  color:var(--stars); font-variant-numeric:tabular-nums lining-nums; }
.rating .stars{ --sz:24px; }
.rating__l2{ display:flex; align-items:center; gap:10px; }
.rating__c{ font-weight:600; font-size:1.0625rem; line-height:1; color:var(--ink); }
.g-word{ height:24px; width:auto; }
.rv-cta{ justify-content:center; margin-top:8px; }
.rtk{ position:relative; z-index:1; overflow:hidden; padding-block:14px 36px; margin-top:-14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
.rtk__rows{ display:flex; flex-direction:column; gap:24px; }
.rtk .tk{ width:max-content; }
.rv{ flex:0 0 auto; width:360px; height:var(--rv-h,auto); display:flex; flex-direction:column; gap:16px; padding:32px;
  background:var(--surface); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.rv__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.stars--sm{ --sz:17px; }
.rv__g{ flex:0 0 auto; line-height:0; }   /* le G seul, calé sur le haut de l'en-tête, jamais collé aux étoiles */
.rv__g .g-g{ width:20px; height:20px; }
.rv__txt{ color:var(--ink); line-height:1.6; }
.rtk + .container .note-wrap{ margin-top:12px; }   /* le padding bas du ticker (36px) + 12px = 48px */
/* tablette et mobile : jamais de défilement horizontal pour un ticker de section, il passe en vertical (fenêtre de 85svh) */
.tk[data-dir="up"].run{ animation-name:tkv-up; }
.tk[data-dir="down"].run{ animation-name:tkv-down; }
@keyframes tkv-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes tkv-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes tkv-in{ from{ transform:translateY(var(--tk-lead)); } to{ transform:translateY(0); } }
@media (max-width:1023px){
  .rtk.is-v{ max-width:var(--container); height:85svh; margin:0 auto; padding:0 var(--pad); overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .rvc{ display:grid; grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; column-gap:var(--tk-gap); align-items:start; }
  .rvc__col{ min-width:0; }
  .rtk.is-v .tk{ flex-direction:column; width:auto; }
  .rtk.is-v .tk__set{ flex-direction:column; padding:0 0 var(--tk-gap); }   /* à la verticale : la gouttière sous la dernière carte de chaque copie */
  .rtk.is-v .rv{ width:auto; }
  .rtk.is-v + .container .note-wrap{ margin-top:48px; }
  /* sans JS : les avis en simple pile, sans défilement horizontal */
  html:not(.js) .rtk{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); -webkit-mask-image:none; mask-image:none; }
  html:not(.js) .rtk .tk{ width:auto; }
  html:not(.js) .rtk .tk__set{ flex-direction:column; padding-left:0; }
  html:not(.js) .rtk .tk__set[aria-hidden]{ display:none; }
  html:not(.js) .rtk .rv{ width:auto; }
}
@media (max-width:767px){
  .rating__n{ font-size:2.25rem; }
  .rating .stars{ --sz:20px; }
  .rvc{ grid-template-columns:minmax(0,1fr); }
  .rv{ padding:32px 24px; }
  .rv__g .g-g{ width:30px; height:30px; }
  .rtk.is-v + .container .note-wrap{ margin-top:32px; }
}

/* ---------- S6 FAQ : accordéon à filets, une colonne centrée de 760px ---------- */
.faq{ max-width:760px; margin-inline:auto; }
.faq__item{ position:relative; }
.faq__item + .faq__item::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline); }
.faq__h{ font-size:inherit; letter-spacing:0; }
.faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:64px;
  padding:20px 16px; text-align:left; font-family:var(--f-title); font-weight:600; font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem); line-height:1.35;
  letter-spacing:-.01em; color:var(--ink); border-radius:var(--r-btn); transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.faq__q:hover{ color:var(--primary); background:rgba(29,69,82,.05); }
.faq__q .ic{ width:20px; height:20px; margin-top:3px; color:var(--primary); transition:transform var(--dur-faq) var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(180deg); }
.faq__a{ display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s linear var(--dur-faq); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--ink-2); padding:0 52px 24px 16px; }   /* la réponse s'aligne sur la question et s'arrête au niveau du chevron */
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s; }
@media (max-width:767px){ .faq__q{ min-height:44px; padding:16px 8px; } .faq__a p{ padding:0 44px 16px 8px; } }

/* ---------- S7 Contact et accès : item à icône en rangées (variante resserrée) face à la photo de la façade ---------- */
.acces{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:1fr auto auto 1fr; column-gap:48px; }
.acces__head{ grid-column:1; grid-row:2; margin-bottom:24px; }
.acces__img{ grid-column:2; grid-row:1 / -1; position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); align-self:center; }
.acces__img::before{ content:""; display:block; padding-top:75%; }   /* 4/3 */
.acces__img .ph{ position:absolute; inset:0; }
.acces__body{ grid-column:1; grid-row:3; display:flex; flex-direction:column; align-items:flex-start; }
.arows{ list-style:none; margin:0; padding:0; align-self:stretch; }
.arow{ position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding-block:12px; line-height:1.45; }
.arow .ic{ color:var(--primary); }
.arow + .arow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--hairline); }   /* filet inséré à l'aplomb du texte */
.arow__txt{ display:flex; flex-wrap:wrap; column-gap:8px; min-width:0; }
.arow__txt strong{ color:var(--ink); }
.arow__txt a{ color:var(--ink); overflow-wrap:anywhere; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(29,69,82,.3);
  text-underline-offset:3px; transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease); }
.arow__txt a:hover{ color:var(--primary); text-decoration-color:var(--primary); }
.acces__body .btn{ margin-top:32px; }
@media (max-width:1023px){
  .acces{ display:flex; flex-direction:column; gap:32px; }
  .acces__head{ margin-bottom:0; }
  .acces__img{ align-self:stretch; }
  .acces__img::before{ padding-top:56.25%; }   /* 16/9 */
  .acces__body .btn{ margin-top:32px; }
}
@media (max-width:767px){
  .arow{ min-height:48px; align-items:flex-start; }
  .arow .ic{ margin-top:2px; }
  .acces__body{ align-items:stretch; }
  .acces__body .btn{ width:100%; }
}

/* ---------- Carte CTA : radial pétrole (foyer clair au centre), centrée, rien au milieu, finit par les deux boutons ---------- */
.cta{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px; border-radius:var(--r-card);
  box-shadow:var(--sh-card); color:var(--bg); background:radial-gradient(75% 95% at 50% 50%,#2C5F70 0%,#1D4552 100%); }
.cta .eyebrow{ color:var(--bg); }
.cta h2{ margin-top:16px; color:var(--bg); }
.cta__lead{ margin-top:16px; font-size:var(--fs-lead); line-height:1.55; color:var(--bg); max-width:62ch; text-wrap:balance; }
.cta__btns{ justify-content:center; margin-top:32px; }
.cta :focus-visible{ outline-color:var(--bg); }
@media (max-width:767px){
  .cta{ padding:48px 32px; }
  .cta__btns{ flex-direction:column; align-items:stretch; align-self:stretch; }
  .cta__btns .btn{ width:100%; }
}
.sec-note .mnote{ margin-inline:auto; }

/* ---------- Contact : formulaire posé sur la section, avec coordonnées (7 / 5) ---------- */
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start; }
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:700; font-size:1rem; line-height:1.4; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--ink-2); margin-left:6px; }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--surface); border:1px solid rgba(28,34,40,.4); border-radius:var(--r-btn); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; min-height:150px; }
.field ::placeholder{ color:#6E747A; opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--primary); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--primary); outline-offset:3px; border-color:var(--primary); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2228' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
.field select:invalid{ color:#6E747A; }
.field select option{ color:var(--ink); }
.err{ display:none; font-size:var(--fs-caption); font-weight:600; line-height:1.4; color:var(--error); }
.field.is-err .err{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--error); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn--primary{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--error); }
.form-foot{ margin-top:16px; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.form-foot a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--ink); }
.form-ok{ padding:24px; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--sh-card); color:var(--ink); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.icard h3{ margin-bottom:16px; }
.icard__h{ display:flex; align-items:center; gap:12px; }
.icard__h .ic{ width:24px; height:24px; color:var(--primary); }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ color:var(--primary); margin-top:3px; }
.icard a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--primary); }
.hrow{ position:relative; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; column-gap:16px; }
.hrow + .hrow{ padding-top:12px; }
.hrow + .hrow::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline); }
.hrow > span:first-child{ white-space:nowrap; font-weight:700; }
.hrow .d{ color:var(--ink-2); }
@media (max-width:1023px){
  .cgrid{ grid-template-columns:minmax(0,1fr); gap:48px; }
  .icards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}
@media (max-width:725px){ .icards{ grid-template-columns:minmax(0,1fr); } }   /* deux cartes côte à côte dès 726px (2 × 335px + 24px, mesuré) */
@media (max-width:767px){
  .icard{ padding:24px; }
  .form-send{ align-items:stretch; }
  .form-send .btn{ width:100%; }
}

/* ---------- Footer : crème uni, Maps bord à bord, identité en trois colonnes dès la largeur mesurée ---------- */
.foot{ background:var(--bg); color:var(--ink); }
.foot__map{ position:relative; height:360px; background:var(--primary-light); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:48px; }
.foot__grid > *{ min-width:0; }
.foot__brand{ margin-bottom:16px; }
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; }
.foot__pos{ display:block; font-family:var(--f-body); font-size:1rem; font-weight:600; letter-spacing:0; color:var(--secondary); margin-top:4px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; }
.foot__tag > span{ display:block; }
.foot__col{ padding-top:calc(var(--lh) + 16px); }   /* première ligne au niveau du nom, pas du logo */
.foot__h{ font-family:var(--f-body); font-weight:700; font-size:var(--fs-over); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--primary); margin-bottom:12px; }
.foot__h--legal{ margin-top:32px; }
.foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot__links a,.foot__info a{ cursor:pointer; display:inline-block; padding-block:9px; margin-block:-9px; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--primary); transform:translateX(3px); }
.foot__parent{ color:var(--ink); }
.foot__sub{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-left:16px; }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .ic{ width:18px; height:18px; margin-top:4px; color:var(--primary); }
.foot__sep{ height:1px; background:var(--hairline); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--fs-caption); color:var(--ink-2); }
@media (max-width:767px){ .foot__map{ height:280px; } }
/* Trois colonnes seulement quand l'air entre deux colonnes atteint 64px : mesuré, 963px nécessaires en tablette
   (317 + 181 + 289px de colonnes, tagline sur ses deux lignes choisies, 2 × 64px d'air, 48px de marges) ; dès 1024px, l'air vaut 77px.
   En dessous, tablette comprise, le footer passe dans sa configuration mobile : une colonne, texte continu. */
@media (max-width:962px){
  .foot__id{ padding-top:44px; }
  .foot__grid{ display:flex; flex-direction:column; }
  .foot__tag > span{ display:inline; }
  .foot__col{ padding-top:0; }
  .foot__col + .foot__col{ margin-top:32px; }
  .foot__sep--m{ display:block; margin-block:32px 0; }
  .foot__sep--m + .foot__col{ padding-top:32px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
@media (min-width:963px) and (max-width:1023px){ .foot__grid{ column-gap:64px; } }
/* ordinateur : le footer prend la largeur du header (1320px) */
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); } }

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
/* état masqué posé sans transition ; les transitions ne s'allument qu'après (fx-on), sinon le fondu de masquage au chargement
   déclenche transitionend et efface le décalage de cascade avant l'apparition */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px); }
html.fx-on [data-reveal]{ transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; transition-delay:0s !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .tk.run{ animation:none !important; }
  html.js-ready [data-reveal],html.js-ready .frise__st{ opacity:1 !important; transform:none !important; }
  .rtk,.annonce__in{ overflow-x:auto; }
  .rtk.is-v{ overflow-x:hidden; overflow-y:auto; -webkit-mask-image:none; mask-image:none; }
  .rtk{ -webkit-mask-image:none; mask-image:none; }
  .tk > .tk__set[aria-hidden],.annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  .annonce__in{ -webkit-mask-image:none; mask-image:none; }
  .annonce__set{ padding-inline:var(--pad) !important; }
  .frise__fill{ clip-path:none !important; }
  .dcard__clip .ph{ transform:none !important; }
}