@charset "UTF-8";
/* ============================================================
   MAM LA CO'CINELLE & LA CO'CINELLE VERTE — FLEURANCE
   Feuille de style unique. Direction éditoriale :
   papier chaud, encre brune, deux accents (terre / sauge),
   alignement à gauche, rythme vertical constant.
   ------------------------------------------------------------
   SOMMAIRE
   1.  Tokens
   2.  Reset et base
   3.  Typographie
   4.  Mise en page : wrap, sections, grilles
   5.  Boutons et liens
   6.  En-tête et navigation
   7.  Pied de page
   8.  Hero
   9.  Cartes MAM et bloc de bascule
   10. Blocs éditoriaux (chiffres, engagements, timeline…)
   11. Listes d'informations, onglets, accordéons
   12. Formulaires
   13. Connexion
   14. Bandeaux, fil d'Ariane, utilitaires
   15. Impression
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* --- Fonds : la majorité du site respire en crème --- */
  --paper:      #FDFAF4;
  --paper-2:    #FFFFFF;
  --creme:      #F8F1E4;
  --cream:      var(--creme);
  --cream-2:    #F1E7D4;

  /* --- Encre --- */
  --ink:        #2D2622;
  --ink-2:      #5C514A;
  --ink-3:      #8D8178;
  --ink-inv:    #FDFAF4;
  --rule:       #E7DCC9;
  --rule-soft:  #F0E8DA;

  /* --- Les deux identités --- */
  --terre:      #C2553A;   --terre-deep: #9A3F28;  --terre-pale: #FBEAE3;
  --sauge:      #5B7F5A;   --sauge-deep: #3F5F3F;  --sauge-pale: #E7F0E4;

  /* --- Accents, en aplats, jamais en dégradé --- */
  --soleil:     #F0B33F;   --soleil-pale: #FDF1DA;
  --beurre:     #F6D98C;
  --peche:      #F4A776;   --peche-pale:  #FDEBDF;
  --corail:     #E8785C;   --corail-pale: #FCE9E3;
  --rose:       #E9A7B4;   --rose-pale:   #FBECEF;
  --ciel:       #7FB2CE;   --ciel-pale:   #E7F1F7;
  --pistache:   #A8C48A;   --pistache-pale:#EFF5E7;
  --lilas:      #A899C6;   --lilas-pale:  #F0ECF7;

  --accent:      var(--terre);
  --accent-deep: var(--terre-deep);
  --accent-pale: var(--terre-pale);

  /* --- Rythme --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;
  --section-y:       clamp(64px, 8vw, 128px);
  --section-y-tight: clamp(40px, 5vw, 72px);

  --wrap:   1220px;
  --gutter: clamp(20px, 5vw, 44px);
  --measure: 66ch;
  --measure-short: 52ch;

  /* --- Formes : arrondis généreux, mais pas partout --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px;
  --r-pill: 999px;

  /* --- Typographie : ronde et expressive pour les titres --- */
  --font-titre: "Fredoka", "Trebuchet MS", sans-serif;
  --font-sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: var(--font-titre);

  --ombre:      0 2px 4px rgba(45,38,34,.04), 0 18px 40px -28px rgba(45,38,34,.4);
  --ombre-forte:0 4px 8px rgba(45,38,34,.06), 0 30px 60px -30px rgba(45,38,34,.45);
}

[data-theme="terre"]{ --accent:var(--terre); --accent-deep:var(--terre-deep); --accent-pale:var(--terre-pale); }
[data-theme="sauge"]{ --accent:var(--sauge); --accent-deep:var(--sauge-deep); --accent-pale:var(--sauge-pale); }

/* ============================================================
   2. RESET ET BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;   /* compense l'en-tête collant */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  margin:0;
  font-feature-settings:"ss01";
  /* Aucun débordement horizontal possible, à aucune largeur */
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column; min-height:100vh;
}
@media (max-width:600px){ body{ font-size:16px; } }

img,svg,video{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--accent-pale); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:var(--ink-inv);
  padding:14px 22px; text-decoration:none; font-weight:600;
}
.skip:focus{ left:0; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1,h2,h3,h4,h5{
  margin:0 0 var(--s-4);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}

/* Grands titres éditoriaux : la serif */
h1,h2,h3,.serif{ font-family:var(--font-titre); font-weight:500; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); line-height:1.02; font-weight:600; }
h2{ font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem); line-height:1.06; }
h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight:600; letter-spacing:-.01em; }

/* Sous-titres : la sans, pour la lisibilité */

h4{ font-family:var(--font-sans); font-size:1.02rem; font-weight:600; letter-spacing:0; line-height:1.35; margin-bottom:var(--s-2); }

p{ margin:0 0 var(--s-4); max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

ul,ol{ margin:0 0 var(--s-4); padding-left:1.15em; max-width:var(--measure); }
li{ margin-bottom:var(--s-2); }
li:last-child{ margin-bottom:0; }

strong,b{ font-weight:600; }
small{ font-size:.86rem; }
.muted{ color:var(--ink-3); }
.soft{ color:var(--ink-2); }

/* Chapeau de section */
.lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:var(--measure-short);
}

/* Petit label au-dessus des titres */
.eyebrow{
  margin:0 0 var(--s-3);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
  max-width:none;
}
.eyebrow--ink{ color:var(--ink-3); }

/* Citation éditoriale */
.pull{
  margin:var(--s-6) 0;
  padding-left:var(--s-5);
  border-left:2px solid var(--accent);
  font-family:var(--font-serif);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  line-height:1.35;
  color:var(--ink);
  max-width:26ch;
}

/* En-tête de section, aligné à gauche par défaut */
.head{ max-width:var(--measure); margin-bottom:var(--s-7); }
.head p:last-child{ margin-bottom:0; }

/* ============================================================
   4. MISE EN PAGE
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:840px; }
.wrap--wide{ max-width:1360px; }

main{ flex:1 0 auto; }

.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--section-y-tight); }
.section--cream{ background:var(--cream); }
.section--paper{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:var(--ink-inv); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#FFFCF6; }
.section--ink p{ color:#D8D1C5; }
.section--ink .eyebrow{ color:#C6BCA9; }

/* Deux sections de même fond ne se collent jamais sans respiration */
.section--cream + .section--cream,
.section--paper + .section--paper{ padding-top:0; }

/* Grilles */
.grid{ display:grid; gap:var(--s-5); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){  .grid--2,.grid--3,.grid--4{ grid-template-columns:minmax(0,1fr); } }

/* Deux colonnes texte / image, alignées sur le même axe haut */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.split--center{ align-items:center; }
.split--reverse > *:first-child{ order:2; }
@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr); }
  .split--reverse > *:first-child{ order:0; }
}

/* Photographies */
.shot{ margin:0; overflow:hidden; border-radius:var(--r-md); background:var(--cream-2); }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.shot--wide{ aspect-ratio:16/9; }
.shot--card{ aspect-ratio:16/10; }
.shot--tall{ aspect-ratio:4/5; }
.shot--square{ aspect-ratio:1; }
.shot--large{ aspect-ratio:3/2; }
@media (max-width:900px){ .shot--tall{ aspect-ratio:16/10; } }

/* Galerie éditoriale asymétrique */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s-4);
}
.gallery .shot{ grid-column:span 2; aspect-ratio:4/3; }
.gallery .shot--large{ grid-column:span 4; aspect-ratio:16/10; }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .gallery .shot{ grid-column:span 2; }
  .gallery .shot--large{ grid-column:span 4; }
}
@media (max-width:600px){
  .gallery{ grid-template-columns:minmax(0,1fr); }
  .gallery .shot,.gallery .shot--large{ grid-column:span 1; aspect-ratio:4/3; }
}

/* ============================================================
   5. BOUTONS ET LIENS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:50px;
  padding:13px 26px;
  border:1.5px solid transparent;
  border-radius:var(--r-pill);
  font-size:.97rem; font-weight:600; line-height:1.2;
  text-decoration:none; text-align:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--solid:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn--light{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--light:hover{ background:#fff; border-color:#fff; }
.btn--outline-light{ background:transparent; color:var(--ink-inv); border-color:rgba(246,241,231,.4); }
.btn--outline-light:hover{ border-color:var(--ink-inv); background:rgba(246,241,231,.08); }
.btn--block{ width:100%; }
.btn--sm{ min-height:42px; padding:9px 18px; font-size:.9rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.btn-row .btn{ flex:0 1 auto; }
@media (max-width:420px){
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ width:100%; }
}

/* Lien texte souligné, discret */
.link{
  color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.link:hover{ color:var(--accent-deep); }

/* ============================================================
   6. EN-TÊTE ET NAVIGATION
   ============================================================ */
.head-site{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,242,.92);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)){ .head-site{ background:var(--paper); } }

.head-in{
  display:flex; align-items:center; gap:var(--s-5);
  min-height:78px;
}
@media (max-width:600px){ .head-in{ min-height:68px; } }

/* Identité */
.brand{
  display:flex; align-items:center; gap:var(--s-3);
  text-decoration:none; margin-right:auto; min-width:0;
  padding-block:10px;
}
.brand__marks{ display:flex; align-items:center; gap:6px; flex:none; }
.brand__dot{ width:11px; height:11px; border-radius:50%; }
.brand__dot--terre{ background:var(--terre); }
.brand__dot--sauge{ background:var(--sauge); }
.brand__name{
  display:block; font-family:var(--font-serif); font-size:1.08rem;
  font-weight:500; line-height:1.15; letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap;
}
.logo--head{ height:38px; width:auto; flex:none; }

/* Navigation principale */
.nav{ display:flex; align-items:center; gap:2px; }
.nav__link{
  display:inline-flex; align-items:center;
  padding:9px 13px; border-radius:var(--r-pill);
  font-size:.93rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  transition:color .18s ease, background-color .18s ease;
}
.nav__link:hover{ color:var(--ink); background:var(--cream); }
.nav__link[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* Sous-menu « Nos MAM » */
.nav__group{ position:relative; }
.nav__toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border:0; background:none; border-radius:var(--r-pill);
  font-size:.93rem; font-weight:500; color:var(--ink-2);
  cursor:pointer; white-space:nowrap;
}
.nav__toggle:hover{ color:var(--ink); background:var(--cream); }
.nav__toggle[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav__chev{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s ease; }
.nav__toggle[aria-expanded="true"] .nav__chev{ transform:translateY(1px) rotate(-135deg); }

.nav__menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:5;
  min-width:270px; padding:var(--s-2);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--r-md); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__menu.is-open{ opacity:1; visibility:visible; transform:none; }
.nav__menu a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:var(--r-sm);
  font-size:.94rem; color:var(--ink-2); text-decoration:none;
}
.nav__menu a:hover{ background:var(--cream); color:var(--ink); }
.nav__menu i{ width:9px; height:9px; border-radius:50%; flex:none; }
.nav__menu i.terre{ background:var(--terre); }
.nav__menu i.sauge{ background:var(--sauge); }

/* Actions à droite */
.head-actions{ display:flex; align-items:center; gap:var(--s-2); flex:none; }

.burger{
  display:none; width:46px; height:46px; flex:none;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--paper-2); cursor:pointer;
}
.burger span{ display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* La bascule desktop / mobile est pilotée en section 17 */

/* Menu mobile */
.nav-mobile{
  position:fixed; inset:78px 0 0; z-index:95;
  background:var(--paper);
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-5) var(--gutter) var(--s-9);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
@media (max-width:600px){ .nav-mobile{ inset:68px 0 0; } }
.nav-mobile.is-open{ opacity:1; transform:none; pointer-events:auto; }
.nav-mobile a{
  display:block; padding:15px 2px;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--font-serif); font-size:1.3rem; text-decoration:none; color:var(--ink);
  min-height:52px;
}
.nav-mobile a.is-child{
  font-family:var(--font-sans); font-size:1rem; color:var(--ink-2);
  padding-left:22px; position:relative;
}
.nav-mobile a.is-child::before{
  content:""; position:absolute; left:2px; top:calc(50% - 4.5px);
  width:9px; height:9px; border-radius:50%;
}
.nav-mobile a.is-child.terre::before{ background:var(--terre); }
.nav-mobile a.is-child.sauge::before{ background:var(--sauge); }
.nav-mobile__actions{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }
.nav-mobile__actions .btn{ width:100%; }

/* ============================================================
   7. PIED DE PAGE
   ============================================================ */
.foot{ background:var(--ink); color:#C8C0B5; padding-block:var(--s-8) var(--s-5); margin-top:auto; }
.foot a{ color:#E9E3D7; text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
.foot h4{ color:#FFFCF6; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:var(--s-4); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-6); }
@media (max-width:960px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:var(--s-7) var(--s-6); } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot__intro{ font-size:.94rem; color:#A79E93; max-width:36ch; }
.foot__list{ list-style:none; margin:0; padding:0; font-size:.94rem; }
.foot__list li{ margin-bottom:var(--s-2); }
.foot__mam{ display:inline-flex; align-items:center; gap:8px; }
.foot__mam i{ width:9px; height:9px; border-radius:50%; flex:none; }
.foot__mam i.terre{ background:var(--terre); }
.foot__mam i.sauge{ background:var(--sauge); }
.foot__bottom{
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.11);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between;
  font-size:.84rem; color:#8E857A;
}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{ padding-block:clamp(40px,5vw,72px) 0; }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
@media (max-width:960px){ .hero__grid{ grid-template-columns:minmax(0,1fr); } }

.hero__title{ max-width:15ch; margin-bottom:var(--s-5); }
.hero__lede{ max-width:52ch; margin-bottom:var(--s-6); }
.hero .btn-row{ margin-top:0; }

.hero__media{ position:relative; }
.hero__media .shot{ aspect-ratio:4/5; border-radius:var(--r-md); }
@media (max-width:960px){ .hero__media .shot{ aspect-ratio:16/10; } }

/* Deux pastilles d'identité posées discrètement sur la photo */
.hero__marks{
  position:absolute; left:var(--s-5); bottom:var(--s-5);
  display:flex; gap:var(--s-2);
  background:rgba(251,248,242,.94);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  padding:8px 16px;
  font-size:.82rem; font-weight:600; color:var(--ink-2);
  align-items:center;
}
.hero__marks i{ width:9px; height:9px; border-radius:50%; }
.hero__marks i.terre{ background:var(--terre); }
.hero__marks i.sauge{ background:var(--sauge); }
@media (max-width:520px){ .hero__marks{ display:none; } }

/* Filet des deux couleurs, signature discrète */
.duo-rule{ display:flex; align-items:center; gap:8px; margin-bottom:var(--s-4); }
.duo-rule i{ width:10px; height:10px; border-radius:50%; }
.duo-rule i:first-child{ background:var(--terre); }
.duo-rule i:nth-child(2){ background:var(--sauge); }
.duo-rule span{ width:56px; height:1px; background:var(--rule); }

/* ============================================================
   9. CARTES MAM ET BASCULE
   ============================================================ */
.mam-card{
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-top:4px solid var(--accent);
  border-radius:var(--r-md);
  overflow:hidden;
  height:100%;
}
.mam-card__media .shot{ border-radius:0; }
.mam-card__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(24px,3vw,36px);
}
.mam-card__since{
  margin:0 0 var(--s-2);
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
}
.mam-card__title{ font-family:var(--font-serif); font-size:clamp(1.5rem,1.2rem + 1vw,2rem); font-weight:400; margin-bottom:var(--s-1); }
.mam-card__team{ color:var(--ink-2); font-size:.98rem; margin-bottom:var(--s-5); }
.mam-card__facts{ margin:0 0 var(--s-6); padding:0; border-top:1px solid var(--rule-soft); }
.mam-card__facts > div{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-4);
  padding:11px 0; border-bottom:1px solid var(--rule-soft);
}
.mam-card__facts dt{ font-size:.84rem; color:var(--ink-3); }
.mam-card__facts dd{ margin:0; font-size:.94rem; color:var(--ink); }
.mam-card .btn{ align-self:flex-start; margin-top:auto; }
@media (max-width:420px){
  .mam-card__facts > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
}

/* Bascule vers l'autre MAM */
.switch{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-5);
  padding:clamp(24px,3.4vw,40px);
  background:var(--accent-pale);
  border-radius:var(--r-md);
}
.switch__title{ font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem); margin-bottom:var(--s-2); }
.switch__text{ color:var(--ink-2); max-width:46ch; margin:0; }

/* ============================================================
   10. BLOCS ÉDITORIAUX
   ============================================================ */

/* --- Chiffres clés, sur un filet et non dans des cartes --- */
.figures{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-6) var(--s-5);
  padding-top:var(--s-6); border-top:1px solid var(--rule);
}
@media (max-width:760px){ .figures{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.figure b{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.2rem,1.6rem + 2vw,3.1rem); line-height:1;
  letter-spacing:-.02em;
}
.figure span{ display:block; margin-top:var(--s-2); font-size:.9rem; color:var(--ink-2); max-width:22ch; }

/* --- Engagements : composition éditoriale numérotée --- */
.pledges{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,80px); }
@media (max-width:760px){ .pledges{ grid-template-columns:minmax(0,1fr); } }
.pledge{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-4);
  padding-block:var(--s-5);
  border-bottom:1px solid var(--rule);
}
.pledge__n{
  font-family:var(--font-serif); font-size:.95rem; color:var(--accent);
  padding-top:3px; min-width:26px;
}
.pledge h3{ margin-bottom:var(--s-2); }
.pledge p{ margin:0; font-size:.96rem; color:var(--ink-2); max-width:46ch; }

/* --- Le projet d'accueil : douze thèmes en colonnes --- */
.themes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,80px); }
@media (max-width:800px){ .themes{ grid-template-columns:minmax(0,1fr); } }
.theme{ padding-block:var(--s-6); border-bottom:1px solid var(--rule); }
.theme__n{
  display:block; font-family:var(--font-serif); font-size:1.5rem;
  color:var(--accent); line-height:1; margin-bottom:var(--s-3);
}
.theme h3{ margin-bottom:var(--s-3); }
.theme p{ margin:0; color:var(--ink-2); font-size:.97rem; max-width:48ch; }

/* --- Frise de la journée --- */
.timeline{ position:relative; max-width:780px; padding-left:var(--s-7); }
.timeline::before{
  content:""; position:absolute; left:7px; top:10px; bottom:10px;
  width:1px; background:var(--rule);
}
.tl{ position:relative; padding-bottom:var(--s-6); }
.tl:last-child{ padding-bottom:0; }
.tl::before{
  content:""; position:absolute; left:calc(-1 * var(--s-7) + 3px); top:9px;
  width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
}
.tl__time{
  display:block; font-size:.79rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s-2);
}
.tl h3{ margin-bottom:var(--s-2); }
.tl p{ margin:0; color:var(--ink-2); font-size:.97rem; }
@media (max-width:520px){ .timeline{ padding-left:var(--s-6); } .tl::before{ left:calc(-1 * var(--s-6) + 3px); } }

/* --- Encadré éditorial (note, précision) --- */
.note{
  padding:var(--s-5);
  background:var(--accent-pale);
  border-radius:var(--r-md);
  font-size:.96rem; color:var(--ink-2);
}
.note p{ max-width:60ch; }
.note strong{ color:var(--ink); }

/* --- Listes à coche --- */
.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  position:relative; padding-left:30px; margin-bottom:var(--s-3);
  font-size:.98rem; color:var(--ink-2); max-width:52ch;
}
.checks li::before{
  content:""; position:absolute; left:2px; top:.45em;
  width:13px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* --- Équipe --- */
.people{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6) var(--s-5); }
@media (max-width:860px){ .people{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .people{ grid-template-columns:minmax(0,1fr); } }
.person__photo{ margin:0 0 var(--s-4); }
.person__photo .shot{ aspect-ratio:1; border-radius:var(--r-md); }
.person__initial{
  display:grid; place-items:center; aspect-ratio:1;
  background:var(--accent-pale); border-radius:var(--r-md);
  font-family:var(--font-serif); font-size:2.6rem; color:var(--accent);
}
.person b{ display:block; font-family:var(--font-serif); font-size:1.35rem; font-weight:400; }
.person__role{ display:block; font-size:.92rem; color:var(--ink-2); margin-top:2px; }
.person p{ font-size:.94rem; color:var(--ink-2); margin-top:var(--s-3); max-width:34ch; }
.person__badges{ list-style:none; margin:var(--s-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.person__badges li{
  margin:0; font-size:.78rem; font-weight:600; color:var(--ink-2);
  background:var(--cream); border-radius:var(--r-pill); padding:4px 11px;
}

/* --- Carte simple, utilisée avec parcimonie --- */
.card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:clamp(22px,2.6vw,30px);
  height:100%;
}
.card h3,.card h4{ margin-bottom:var(--s-3); }
.card p{ color:var(--ink-2); font-size:.96rem; }

/* ============================================================
   11. INFORMATIONS, ONGLETS, ACCORDÉONS
   ============================================================ */

/* Liste d'informations en deux colonnes */
.rows{ margin:0; padding:0; border-top:1px solid var(--rule); }
.row-info{
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:var(--s-4);
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
  align-items:start;
}
.row-info dt{ font-size:.86rem; color:var(--ink-3); line-height:1.5; }
.row-info dd{ margin:0; font-size:.98rem; color:var(--ink); }
.row-info dd a{ color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; }
@media (max-width:560px){
  .row-info{ grid-template-columns:minmax(0,1fr); gap:var(--s-1); padding:12px 0; }
}

/* Sélecteur de MAM (onglets) */
.tabs{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--cream); border-radius:var(--r-pill);
  margin-bottom:var(--s-7); max-width:100%; flex-wrap:wrap;
}
.tabs a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 20px;
  border-radius:var(--r-pill);
  font-size:.94rem; font-weight:600; color:var(--ink-2); text-decoration:none;
  white-space:nowrap;
}
.tabs a i{ width:9px; height:9px; border-radius:50%; flex:none; }
.tabs a i.terre{ background:var(--terre); }
.tabs a i.sauge{ background:var(--sauge); }
.tabs a[aria-current="true"]{ background:var(--paper-2); color:var(--ink); box-shadow:var(--shadow); }
@media (max-width:520px){
  .tabs{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; border-radius:var(--r-md); }
  .tabs a{ justify-content:flex-start; border-radius:var(--r-sm); }
}

/* Accordéon */
.acc{ border-bottom:1px solid var(--rule); }
.acc summary{
  list-style:none; cursor:pointer; position:relative;
  padding:var(--s-5) 48px var(--s-5) 0;
  font-size:1.05rem; font-weight:600; min-height:56px;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:10px; height:10px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.acc[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.acc summary:hover{ color:var(--accent); }
.acc__body{ padding-bottom:var(--s-5); }
.acc__body p{ color:var(--ink-2); }

/* ============================================================
   12. FORMULAIRES
   ============================================================ */
.form{ display:grid; gap:var(--s-5); }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5); }
@media (max-width:620px){ .form__row{ grid-template-columns:minmax(0,1fr); } }

.field label,.fieldset__legend{
  display:block; font-size:.92rem; font-weight:600; margin-bottom:var(--s-2); color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%; min-height:52px;
  padding:14px 16px;
  font:inherit; font-size:16px;   /* 16px : évite le zoom automatique sur iOS */
  color:var(--ink); background:var(--paper-2);
  border:1.5px solid var(--rule); border-radius:var(--r-sm);
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23584E47' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(70,101,74,.18);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field__hint{ margin:var(--s-2) 0 0; font-size:.85rem; color:var(--ink-3); }

.fieldset{ border:0; margin:0; padding:0; }
.fieldset__legend{ padding:0; }

/* Cases à cocher en pastilles tactiles */
.choices{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.choice{ position:relative; }
.choice input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.choice span{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; min-width:64px; padding:10px 18px;
  border:1.5px solid var(--rule); border-radius:var(--r-pill);
  background:var(--paper-2); font-size:.94rem; font-weight:600; color:var(--ink-2);
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.choice input:checked + span{ border-color:var(--accent); background:var(--accent-pale); color:var(--accent-deep); }
.choice input:focus-visible + span{ outline:3px solid var(--accent); outline-offset:3px; }

/* Consentement */
.consent{ display:flex; gap:var(--s-3); align-items:flex-start; }
.consent input{ width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--accent); }
.consent label{ font-size:.92rem; font-weight:400; color:var(--ink-2); margin:0; }

/* Messages */
.alert{ padding:var(--s-4) var(--s-5); border-radius:var(--r-sm); font-size:.96rem; }
.alert--ok{ background:var(--sauge-pale); color:var(--sauge-deep); border:1px solid #C3D6BE; }
.alert--error{ background:#FBEDE9; color:#8A2F1C; border:1px solid #EFCDC4; }
.alert ul{ margin:var(--s-2) 0 0; }
.alert p:last-child{ margin-bottom:0; }

/* Confirmation d'envoi */
.confirm{ text-align:left; max-width:560px; }
.confirm__mark{
  width:56px; height:56px; border-radius:50%;
  background:var(--sauge-pale); color:var(--sauge-deep);
  display:grid; place-items:center; margin-bottom:var(--s-5);
}

/* ============================================================
   13. CONNEXION
   ============================================================ */
.login{ min-height:60vh; display:grid; place-items:center; padding-block:var(--section-y); }
.login__box{ width:100%; max-width:460px; }
.login__brand{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s-6); }
.login__brand i{ width:10px; height:10px; border-radius:50%; }
.login__brand i:first-child{ background:var(--terre); }
.login__brand i:nth-child(2){ background:var(--sauge); }
.login__brand span{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.login__choices{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }
.login__choice{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5); min-height:76px;
  background:var(--paper-2); border:1.5px solid var(--rule); border-radius:var(--r-md);
  text-decoration:none; color:var(--ink);
  transition:border-color .18s ease, background-color .18s ease;
}
.login__choice:hover{ border-color:var(--accent); background:var(--accent-pale); }
.login__choice b{ display:block; font-size:1.05rem; font-weight:600; }
.login__choice span{ display:block; font-size:.89rem; color:var(--ink-3); margin-top:2px; }
.login__arrow{ flex:none; width:10px; height:10px; border-top:2px solid var(--ink-3); border-right:2px solid var(--ink-3); transform:rotate(45deg); }

/* ============================================================
   14. BANDEAUX, FIL D'ARIANE, UTILITAIRES
   ============================================================ */
.band{ background:var(--ink); color:var(--ink-inv); padding-block:var(--section-y-tight); }
.band__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-6);
}
.band__text{ max-width:52ch; }
.band__text h2{ color:#FFFCF6; margin-bottom:var(--s-3); font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem); }
.band__text p{ color:#CFC8BB; margin:0; font-size:.99rem; }
.band__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (max-width:420px){
  .band__actions{ width:100%; flex-direction:column; }
  .band__actions .btn{ width:100%; }
}

.crumb{ border-bottom:1px solid var(--rule-soft); }
.crumb ol{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  list-style:none; margin:0; padding:14px 0; max-width:none;
  font-size:.85rem; color:var(--ink-3);
}
.crumb li{ margin:0; display:flex; align-items:center; gap:6px; }
.crumb li + li::before{ content:"›"; color:var(--rule); }
.crumb a{ text-decoration:none; color:var(--ink-2); }
.crumb a:hover{ color:var(--ink); text-decoration:underline; }

.sr{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.mb-0{ margin-bottom:0 !important; }
.mt-5{ margin-top:var(--s-5); }
.mt-6{ margin-top:var(--s-6); }
.mt-7{ margin-top:var(--s-7); }
.stack > * + *{ margin-top:var(--s-5); }
.rule{ border:0; border-top:1px solid var(--rule); margin:var(--s-7) 0; }

/* Le logo d'une MAM, quand le fichier est présent */
.logo{ height:56px; width:auto; }
.logo--texte{
  display:inline-block; height:auto;
  font-family:var(--font-serif); font-size:1.35rem; color:var(--accent);
}

/* Tableau comparatif */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare{ width:100%; border-collapse:collapse; font-size:.96rem; text-align:left; }
.compare caption{ text-align:left; padding-bottom:var(--s-4); color:var(--ink-2); }
.compare th,.compare td{ padding:15px 18px; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.compare thead th{
  font-family:var(--font-serif); font-weight:400; font-size:1.1rem;
  border-bottom:2px solid var(--rule);
}
.compare thead th.th-terre{ border-bottom-color:var(--terre); }
.compare thead th.th-sauge{ border-bottom-color:var(--sauge); }
.compare tbody th{ font-weight:500; color:var(--ink-3); font-size:.88rem; width:24%; }
.compare tbody td{ color:var(--ink); }
@media (max-width:720px){ .compare{ min-width:620px; } }
.table-hint{ margin-top:var(--s-3); font-size:.85rem; color:var(--ink-3); }
@media (min-width:721px){ .table-hint{ display:none; } }

/* ============================================================
   15. IMPRESSION
   ============================================================ */
@media print{
  .head-site,.nav-mobile,.band,.foot,.crumb,.btn{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .section{ padding-block:12pt; }
}

/* ============================================================
   16. CORRECTIONS D'AFFICHAGE ET GARDE-FOUS RESPONSIVE
   Passés en revue à 375, 390, 430, 768, 1024 et 1440 px.
   ============================================================ */

/* --- Identité : le nom des deux MAM est long. Il passe sur
   deux lignes plutôt que de pousser l'en-tête hors de l'écran. */
@media (max-width:380px){ .head-in{ gap:var(--s-3); } }

/* --- Aucun mot long (adresse e-mail, URL) ne peut déborder --- */
.row-info dd,
.foot__list li,
.mam-card__facts dd,
.card p,
.acc__body{ overflow-wrap:anywhere; }

/* --- Liste des thèmes du projet d'accueil, sur fond sombre --- */
.theme-list{
  list-style:none; margin:0; padding:0; max-width:none;
  columns:2; column-gap:var(--s-6);
  font-size:.95rem; line-height:1.95;
}
.theme-list li{ break-inside:avoid; margin:0; color:#D8D1C5; }
@media (max-width:600px){ .theme-list{ columns:1; line-height:1.75; } }

/* --- Les cartes d'une même rangée gardent la même hauteur --- */
.grid > *{ min-width:0; }
.grid--2 > .card,
.grid--3 > .card,
.grid--4 > .card{ display:flex; flex-direction:column; }
.grid .card > .btn-row:last-child,
.grid .card > .btn:last-child{ margin-top:auto; }

/* --- Le premier titre d'une carte ne double pas la marge --- */
.card > *:first-child{ margin-top:0; }
.card > *:last-child{ margin-bottom:0; }

/* --- La première section après le fil d'Ariane respire moins --- */
.crumb + .section{ padding-top:var(--s-6); }

/* --- Sur les grandes largeurs, les paragraphes ne s'étirent pas --- */
.section p,.section li{ max-width:var(--measure); }
.section--ink .theme-list li{ max-width:none; }

/* --- Champs et boutons : cible tactile confortable partout --- */
@media (max-width:600px){
  .btn{ min-height:52px; padding:14px 24px; }
  .field input,.field select,.field textarea{ min-height:54px; }
  .tabs a{ min-height:50px; }
}

/* --- Les formulaires ne dépassent jamais de leur colonne --- */
.form,.form__row,.field,.choices{ min-width:0; max-width:100%; }
.choices .choice{ flex:0 1 auto; }

/* --- Frise : le trait s'arrête proprement au dernier point --- */
.timeline .tl:last-child::after{
  content:""; position:absolute; left:calc(-1 * var(--s-7) + 7px); top:20px; bottom:-8px;
  width:1px; background:var(--paper);
}
@media (max-width:520px){
  .timeline .tl:last-child::after{ left:calc(-1 * var(--s-6) + 7px); }
}
.section--cream .timeline .tl:last-child::after{ background:var(--cream); }
.section--paper .timeline .tl:last-child::after{ background:var(--paper-2); }

/* --- Le sous-menu ne sort pas de l'écran sur écran moyen --- */
@media (max-width:1250px){ .nav__menu{ left:auto; right:0; } }

/* ============================================================
   17. EN-TÊTE — BASCULE MESURÉE, PAS DEVINÉE
   ------------------------------------------------------------
   Les libellés du menu, le nom des deux MAM et les deux boutons
   occupent une largeur qui dépend du rendu réel des polices.
   Plutôt que de fixer un seuil au jugé, assets/menu.js mesure la
   barre et pose sur l'en-tête :
     data-nav="full"    → les deux boutons tiennent
     (pas d'attribut)   → état par défaut : bouton secondaire masqué
     data-nav="burger"  → tout passe dans le menu hamburger
   Les règles ci-dessous ne font qu'appliquer cette décision.
   ============================================================ */

/* La marque ne rétrécit jamais : c'est ce qui rend le
   dépassement mesurable, et le nom des MAM reste toujours
   lisible en entier. */
.brand{ flex:none; }
.nav,.head-actions{ flex:none; }

/* Lockup sur deux lignes : environ 170 px au lieu de 280. */
.brand__text{ display:block; min-width:0; }
.brand__name{
  font-size:1rem; line-height:1.24; letter-spacing:-.005em;
  white-space:nowrap;
}
.brand__name--second{ color:var(--ink-2); }

/* Navigation resserrée, pour rendre de la place au reste. */
.nav{ gap:0; }
.nav__link,.nav__toggle{ padding:9px 11px; font-size:.91rem; }

/* --- Les états décidés par la mesure ---
   L'état par défaut est le plus SÛR, pas le plus complet : le
   bouton secondaire est masqué. Si le script mesure qu'il y a la
   place, il le rétablit. Ainsi, script en échec ou non, la barre
   ne peut jamais déborder. */
.head-actions .btn--solid{ display:none; }
.head-site[data-nav="full"] .head-actions .btn--solid{ display:inline-flex; }

.head-site[data-nav="burger"] .nav,
.head-site[data-nav="burger"] .head-actions .btn{ display:none; }
.head-site[data-nav="burger"] .burger{ display:flex; }

/* --- Repli sans JavaScript --- */
/* Le script n'a pas tourné : on retombe sur un seuil prudent.
   Le pied de page contient de toute façon toute la navigation. */
@media (max-width:1180px){
  .head-site:not([data-nav]) .nav,
  .head-site:not([data-nav]) .head-actions .btn{ display:none; }
  .head-site:not([data-nav]) .burger{ display:flex; }
}

/* Sur mobile, la marque occupe la largeur disponible */
@media (max-width:760px){ .brand__name{ font-size:.97rem; } }
@media (max-width:380px){
  .brand__name{ font-size:.9rem; }
  .head-in{ gap:var(--s-3); }
}

/* ============================================================
   18. DISPONIBILITÉS, ORIENTATION, BUDGET
   ============================================================ */

/* --- Pastille d'état des places --- */
.dispo{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  margin:0 0 var(--s-4); max-width:none;
  font-size:.92rem;
}
.dispo__dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  align-self:center; background:var(--ink-3);
}
.dispo__label{ font-weight:600; color:var(--ink); }
.dispo__detail{ color:var(--ink-2); }
.dispo__date{
  width:100%; font-size:.79rem; color:var(--ink-3);
}
.dispo--oui   .dispo__dot{ background:#3F7D46; box-shadow:0 0 0 4px rgba(63,125,70,.14); }
.dispo--oui   .dispo__label{ color:#2F6236; }
.dispo--liste .dispo__dot{ background:var(--miel, #B8862F); }
.dispo--non   .dispo__dot{ background:var(--terre); }
.dispo--inconnu .dispo__label{ color:var(--ink-2); font-weight:500; }

/* --- Orientation : questions --- */
.quiz{ gap:var(--s-7); }
.quiz__step{ padding-bottom:var(--s-6); border-bottom:1px solid var(--rule); }
.quiz__step:last-of-type{ border-bottom:0; padding-bottom:0; }
.quiz__legend{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.55rem);
  line-height:1.25; margin-bottom:var(--s-5); padding:0;
}
.choice--wide span{ min-width:0; text-align:left; padding:12px 22px; }
@media (max-width:520px){
  .choices{ flex-direction:column; align-items:stretch; }
  .choice--wide span{ justify-content:flex-start; }
}

/* La carte suggérée se distingue par le trait, pas par la couleur seule */
.card--retenue{
  border-color:var(--accent);
  border-width:1.5px;
  box-shadow:var(--shadow);
}

/* --- Estimateur de budget --- */
.budget{
  padding:clamp(24px,3vw,34px);
  background:var(--cream);
  border-radius:var(--r-md);
}
.budget__label{
  margin:0 0 var(--s-2);
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
.budget__total{
  margin:0 0 var(--s-5);
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem); line-height:1;
  letter-spacing:-.02em; color:var(--ink);
}
.budget .rows{ border-top-color:var(--rule); }
.budget .row-info{ grid-template-columns:minmax(0,1fr) auto; }
.budget .row-info dd{ font-variant-numeric:tabular-nums; font-weight:600; }
.budget__note{
  margin:var(--s-5) 0 var(--s-4);
  font-size:.87rem; color:var(--ink-2); line-height:1.55;
}

/* ============================================================
   19. DIRECTION ARTISTIQUE — ENFANCE PREMIUM
   ------------------------------------------------------------
   Les deux identités restent les accents principaux. Les
   couleurs ci-dessous sont SECONDAIRES : elles ponctuent, elles
   ne décorent pas. Aucun dégradé, uniquement des aplats.
   ============================================================ */
:root{
  --soleil:      #E8A33D;   --soleil-pale: #FBF0DC;
  --ciel:        #6E9BB8;   --ciel-pale:   #E6EFF4;
  --corail:      #D2694F;   --corail-pale: #FAEAE4;
  --lilas:       #8A7BA8;   --lilas-pale:  #EFEBF5;
}

/* --- Sections en aplat, pour rythmer la page --- */
.section--soleil{ background:var(--soleil-pale); }
.section--ciel{   background:var(--ciel-pale); }
.section--corail{ background:var(--corail-pale); }
.section--lilas{  background:var(--lilas-pale); }

/* --- Traits dessinés à la main --- */
.trait{ display:block; color:var(--accent); opacity:.85; }
.trait--sous-titre{ width:132px; height:12px; margin:calc(-1 * var(--s-2)) 0 var(--s-5); }
.trait--coin{
  position:absolute; width:64px; height:64px; color:var(--soleil);
  opacity:.55; pointer-events:none;
}
.trait--coin-haut{ top:-18px; right:-10px; }
@media (max-width:760px){ .trait--coin{ display:none; } }

/* Petits points semés, très discrets */
.semis{ position:relative; }
.semis::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:120px; height:120px; left:-46px; top:-30px;
  background-image:radial-gradient(circle, var(--rule) 1.6px, transparent 1.6px);
  background-size:16px 16px; opacity:.8;
}
.semis > *{ position:relative; z-index:1; }
@media (max-width:900px){ .semis::before{ display:none; } }

/* --- Composition photographique asymétrique --- */
.compo{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--s-4);
  align-items:end;
}
.compo__a{ grid-column:1 / span 7; }
.compo__a .shot{ aspect-ratio:4/5; }
.compo__b{ grid-column:8 / span 5; padding-bottom:var(--s-7); }
.compo__b .shot{ aspect-ratio:1; }
.compo__c{ grid-column:3 / span 8; margin-top:calc(-1 * var(--s-7)); }
.compo__c .shot{ aspect-ratio:16/9; }
@media (max-width:760px){
  .compo{ grid-template-columns:minmax(0,1fr); }
  .compo__a,.compo__b,.compo__c{ grid-column:1; margin-top:0; padding-bottom:0; }
  .compo__a .shot,.compo__b .shot,.compo__c .shot{ aspect-ratio:4/3; }
}

/* --- Chiffres colorés, un accent différent par colonne --- */
.figures .figure:nth-child(1) b{ color:var(--terre); }
.figures .figure:nth-child(2) b{ color:var(--sauge); }
.figures .figure:nth-child(3) b{ color:var(--soleil); }
.figures .figure:nth-child(4) b{ color:var(--ciel); }

/* --- Engagements : pastille colorée en rotation --- */
.pledge__n{ font-variant-numeric:tabular-nums; }
.pledges .pledge:nth-child(4n+1) .pledge__n{ color:var(--terre); }
.pledges .pledge:nth-child(4n+2) .pledge__n{ color:var(--sauge); }
.pledges .pledge:nth-child(4n+3) .pledge__n{ color:var(--soleil); }
.pledges .pledge:nth-child(4n)   .pledge__n{ color:var(--ciel); }

/* --- Photo légèrement inclinée, une seule par page --- */
.shot--penche{ transform:rotate(-1.4deg); }
@media (prefers-reduced-motion: reduce){ .shot--penche{ transform:none; } }

/* ============================================================
   20. UNIVERS ILLUSTRÉ
   ------------------------------------------------------------
   Les dessins ponctuent, ils ne remplissent pas : une à deux
   par section. Certains débordent légèrement de leur bloc,
   c'est voulu.
   ============================================================ */
.deco{ display:block; pointer-events:none; }
.deco--flotte{ animation:flotte 7s ease-in-out infinite; }
.deco--flotte-lent{ animation:flotte 11s ease-in-out infinite; }
@keyframes flotte{
  0%,100%{ transform:translateY(0) rotate(0); }
  50%{ transform:translateY(-9px) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce){
  .deco--flotte,.deco--flotte-lent{ animation:none; }
}

.deco--coin{ position:absolute; width:80px; height:80px; opacity:.7; }
.pose{ position:relative; }
.pose__deco{ position:absolute; z-index:2; pointer-events:none; }
.pose__deco--hg{ top:-26px; left:-22px; }
.pose__deco--hd{ top:-30px; right:-18px; }
.pose__deco--bg{ bottom:-22px; left:-26px; }
.pose__deco--bd{ bottom:-26px; right:-20px; }
@media (max-width:760px){ .pose__deco{ display:none; } }

.trait{ display:block; width:190px; height:15px; color:var(--accent);
        margin:calc(-1 * var(--s-2)) 0 var(--s-5); }

.vague{ display:block; width:100%; height:48px; margin-bottom:-1px; }
.vague--haut{ transform:rotate(180deg); margin:-1px 0 0; }

/* ============================================================
   21. SECTIONS COLORÉES
   ============================================================ */
.section--creme{ background:var(--creme); }
.section--soleil{ background:var(--soleil-pale); }
.section--ciel{   background:var(--ciel-pale); }
.section--peche{  background:var(--peche-pale); }
.section--rose{   background:var(--rose-pale); }
.section--pistache{ background:var(--pistache-pale); }
.section--lilas{  background:var(--lilas-pale); }

/* ============================================================
   22. HERO
   ============================================================ */
.hero{ position:relative; padding-block:clamp(32px,5vw,72px) 0; overflow:visible; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:minmax(0,1fr); } }

.hero__label{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px 7px 10px; border-radius:var(--r-pill);
  background:var(--soleil-pale); color:var(--ink-2);
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  margin-bottom:var(--s-5);
}
.hero__label i{ width:9px; height:9px; border-radius:50%; background:var(--soleil); }

.hero__title{ max-width:13ch; margin-bottom:var(--s-4); }
.hero__title em{ font-style:normal; color:var(--terre); }
.hero__title span{ color:var(--sauge); }
.hero__lede{ max-width:48ch; font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
             color:var(--ink-2); margin-bottom:var(--s-6); }

.hero__media{ position:relative; }
.hero__media .shot{
  aspect-ratio:4/5; border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-xl);
  box-shadow:var(--ombre-forte);
}
@media (max-width:980px){ .hero__media .shot{ aspect-ratio:16/11; } }

.hero__pastille{
  position:absolute; z-index:3; left:-18px; bottom:36px;
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:var(--r-pill);
  background:var(--paper-2); box-shadow:var(--ombre-forte);
  font-size:.88rem; font-weight:700; color:var(--ink);
}
.hero__pastille i{ width:11px; height:11px; border-radius:50%; }
.hero__pastille i.terre{ background:var(--terre); }
.hero__pastille i.sauge{ background:var(--sauge); }
@media (max-width:560px){ .hero__pastille{ left:0; bottom:-16px; font-size:.8rem; } }

/* ============================================================
   23. CARTES « NOTRE UNIVERS »
   ============================================================ */
.univers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5); }
@media (max-width:980px){ .univers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .univers{ grid-template-columns:minmax(0,1fr); } }

.uni{
  position:relative; padding:var(--s-6) var(--s-5) var(--s-5);
  border-radius:var(--r-lg); background:var(--paper-2);
  border:1.5px solid var(--rule-soft);
  transition:transform .28s ease, box-shadow .28s ease;
}
.uni:hover{ transform:translateY(-6px); box-shadow:var(--ombre-forte); }
.uni__ill{ margin-bottom:var(--s-4); }
.uni h3{ margin-bottom:var(--s-2); }
.uni p{ font-size:.96rem; color:var(--ink-2); margin:0; }
.uni:nth-child(1){ background:var(--soleil-pale); border-color:transparent; }
.uni:nth-child(2){ background:var(--ciel-pale);   border-color:transparent; }
.uni:nth-child(3){ background:var(--pistache-pale);border-color:transparent; }
.uni:nth-child(4){ background:var(--rose-pale);   border-color:transparent; }

/* ============================================================
   24. FRISE DE LA JOURNÉE
   ============================================================ */
.frise-jour{ display:grid; gap:var(--s-4); }
.moment{
  display:grid; grid-template-columns:96px 56px minmax(0,1fr); gap:var(--s-4);
  align-items:center; padding:var(--s-4) var(--s-5);
  background:var(--paper-2); border-radius:var(--r-lg);
  border:1.5px solid var(--rule-soft);
}
.moment__h{ font-family:var(--font-titre); font-weight:600; font-size:1.05rem; color:var(--accent); }
.moment__ill{ display:flex; justify-content:center; }
.moment h3{ margin:0 0 3px; font-size:1.08rem; }
.moment p{ margin:0; font-size:.94rem; color:var(--ink-2); }
.moment:nth-child(3n+1){ background:var(--soleil-pale); border-color:transparent; }
.moment:nth-child(3n+2){ background:var(--ciel-pale);   border-color:transparent; }
.moment:nth-child(3n)  { background:var(--pistache-pale);border-color:transparent; }
@media (max-width:640px){
  .moment{ grid-template-columns:72px minmax(0,1fr); }
  .moment__ill{ display:none; }
}

/* ============================================================
   25. BOUTONS, REPRIS EN PLUS RONDS
   ============================================================ */
.btn{ border-radius:var(--r-pill); font-weight:700; min-height:54px; padding:15px 30px;
      transition:transform .18s ease, background-color .2s ease, box-shadow .2s ease; }
.btn--solid{ box-shadow:0 6px 0 -2px color-mix(in srgb, var(--accent-deep) 55%, transparent); }
.btn--solid:hover{ transform:translateY(-2px); }
.btn--solid:active{ transform:translateY(1px); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .btn:hover,.btn:active{ transform:none; } }

/* ============================================================
   26. APPARITION AU DÉFILEMENT
   ============================================================ */
.paraitre{ opacity:0; transform:translateY(22px); }
.paraitre.vu{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .paraitre{ opacity:1; transform:none; }
}

/* ============================================================
   27. PHOTOS PLUS RONDES
   ============================================================ */
.shot{ border-radius:var(--r-lg); }
.shot--blob{ border-radius:58% 42% 46% 54% / 44% 52% 48% 56%; }
.gallery .shot{ border-radius:var(--r-lg); }
.mam-card{ border-radius:var(--r-lg); }
.card{ border-radius:var(--r-lg); }
.note{ border-radius:var(--r-lg); }
.switch{ border-radius:var(--r-xl); }