/* ══════════════════════════════════════════════════════════════
   Carina Botelho — refonte Yayo Studio · 03/09/2026
   Atmosphère : craie froide · Registre : grotesque + humaniste
   Le principe : la lisibilité est le sujet du site, donc sa forme.
   ══════════════════════════════════════════════════════════════ */

/* ── Kit motion — l'état écrit ici est l'état APRÈS animation ── */
:root{ --y-duree:.9s; --y-courbe:cubic-bezier(.22,1,.36,1) }
.y-lignes,.y-ligne{ will-change:transform }
html.y-on .y-monte{ opacity:0; transform:translateY(22px) }
html.y-on .y-cascade > *{ opacity:0; transform:translateY(26px) }
.y-ouvre{ overflow:hidden }
.y-ouvre > img,.y-ouvre > .y-fond{ width:100%;height:100%;object-fit:cover;display:block }
.y-para{ will-change:transform }
.y-aimant{ display:inline-block; will-change:transform }
.y-compteur{ font-variant-numeric:tabular-nums lining-nums }
@media (max-width:900px){ .y-para{transform:none!important} .y-aimant{transform:none!important} }
@media (prefers-reduced-motion:reduce){
  html.y-on .y-monte,html.y-on .y-cascade > *{opacity:1!important;transform:none!important}
  .y-ouvre{clip-path:none!important} .y-ouvre > img{transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
*{ -webkit-tap-highlight-color:transparent }
:where(a,button,input,select,textarea,summary,[tabindex]):focus{ outline:none }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--terre); outline-offset:3px; border-radius:2px }

/* ── Jetons ──────────────────────────────────────────────────── */
:root{
  --craie:#E2E6E4;      /* le fond, craie froide — ni blanc, ni papier chaud */
  --carte:#EFF2F0;
  --encre:#13201C;      /* 13,3:1 sur craie */
  --vert:#0E5340;       /* 7,2:1  — l'accent de marque, hérité et assombri */
  --terre:#A24A31;      /* 4,7:1  — le second accent, réservé au pointage */
  --gris:#4A5450;       /* 6,2:1  — texte secondaire */
  --trait:#C3CBC7;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --corps:"Atkinson Hyperlegible",system-ui,sans-serif;
  --marge:clamp(20px,5vw,72px);
  --mesure:66ch;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--craie); color:var(--encre);
  font-family:var(--corps); font-size:clamp(16.5px,1.02vw,18.5px);
  line-height:1.65; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02;
  letter-spacing:-.022em; margin:0; text-wrap:balance }
h1{ font-size:clamp(2.35rem,5.6vw,4.6rem) }
h2{ font-size:clamp(1.9rem,3.9vw,3.1rem) }
h3{ font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.012em }
p{ margin:0 0 1.05em; max-width:var(--mesure) }
.chapeau{ font-size:clamp(1.05rem,1.35vw,1.24rem); color:var(--gris); line-height:1.6 }

.enveloppe{ width:min(1280px,100% - var(--marge)*2); margin-inline:auto }
section{ padding-block:clamp(62px,8.6vh,112px) }
@media (max-width:620px){ section{ padding-block:54px } }

/* Le sur-titre : le seul endroit où l'on écrit en capitales */
.rang{ font-family:var(--display); font-weight:700; font-size:.735rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--terre);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.4rem }
.rang::before{ content:''; width:26px; height:2px; background:var(--terre); flex:none }

/* ── Évitement clavier ───────────────────────────────────────── */
.evite{ position:absolute; left:-9999px; top:0; z-index:100 }
.evite:focus{ left:12px; top:12px; background:var(--encre); color:var(--craie);
  padding:14px 18px; min-height:44px; border-radius:3px }

/* ── En-tête ─────────────────────────────────────────────────── */
.entete{ position:sticky; top:0; z-index:60; background:rgba(226,230,228,.93);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--trait) }
.entete .enveloppe{ display:flex; align-items:center; gap:1.4rem;
  min-height:70px; justify-content:space-between }
.marque{ font-family:var(--display); font-weight:800; font-size:1.06rem;
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:.42rem }
.marque em{ font-style:normal; color:var(--vert) }
.menu{ display:flex; align-items:center; gap:clamp(.7rem,1.7vw,1.9rem);
  list-style:none; margin:0; padding:0 }
.menu a{ text-decoration:none; font-size:.94rem; color:var(--gris);
  padding:11px 2px; display:inline-block; min-height:44px; line-height:22px;
  border-bottom:2px solid transparent; transition:color .25s,border-color .25s }
.menu a:hover{ color:var(--encre) }
.menu a[aria-current="page"]{ color:var(--encre); border-bottom-color:var(--vert) }

/* ── Boutons ─────────────────────────────────────────────────── */
.bouton{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:13px 24px; border-radius:2px; border:2px solid var(--vert);
  background:var(--vert); color:#fff; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.96rem; letter-spacing:-.008em;
  transition:background .25s,color .25s,transform .25s }
.bouton:hover{ background:#0A3E30; border-color:#0A3E30 }
.bouton.creux{ background:transparent; color:var(--vert) }
.bouton.creux:hover{ background:var(--vert); color:#fff }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem }

/* ── Le tableau de lettres ───────────────────────────────────── */
.tableau{ display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(5px,.55vw,9px) }
.tuile{ aspect-ratio:1/1; display:grid; place-items:center;
  background:var(--carte); border:1px solid var(--trait); border-radius:3px;
  font-family:var(--corps); font-weight:700; color:var(--gris);
  font-size:clamp(.95rem,1.5vw,1.35rem); line-height:1;
  transition:background .22s ease,color .22s ease,border-color .22s ease }
.tuile[data-on="1"]{ background:var(--terre); border-color:var(--terre); color:#fff }
.tuile.vide{ background:transparent; border-color:transparent }

/* ── Accueil : hero ──────────────────────────────────────────── */
.hero{ padding-block:clamp(52px,8vh,96px) clamp(56px,9vh,110px) }
.hero .enveloppe{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.4vw,70px); align-items:center }
.hero h1{ margin-bottom:1.25rem }
.hero h1 .vert{ color:var(--vert) }
.hero .chapeau{ max-width:52ch }
.reperes{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.7rem;
  font-size:.9rem; color:var(--gris); list-style:none; padding:0 }
.reperes li{ display:flex; align-items:center; gap:.45rem }
.reperes li::before{ content:''; width:6px; height:6px; border-radius:50%;
  background:var(--vert); flex:none }
@media (max-width:900px){ .hero .enveloppe{ grid-template-columns:1fr } }

/* ── Le cran scrubbé : composer une phrase ───────────────────── */
.epeler{ background:var(--encre); color:var(--craie) }
.epeler .rang{ color:#E0A18B }
.epeler .rang::before{ background:#E0A18B }
.epeler h2{ color:#fff }
.epeler .chapeau{ color:#AFBCB7 }
.scene{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px); align-items:center; margin-top:2.6rem }
.epeler .tuile{ background:#1D2E29; border-color:#2C403A; color:#9FB0AA }
.epeler .tuile[data-on="1"]{ background:#E0A18B; border-color:#E0A18B; color:#13201C }
.phrase{ font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.12; letter-spacing:-.02em;
  min-height:2.4em; word-break:break-word }
.phrase .attente{ color:#3C534C }
.compte{ display:flex; align-items:baseline; gap:.6rem; margin-top:1.6rem;
  font-family:var(--display); font-weight:800 }
.compte .n{ font-size:clamp(2.6rem,5.4vw,4.2rem); color:#E0A18B; line-height:1 }
.compte .l{ font-family:var(--corps); font-weight:400; font-size:.92rem;
  color:#AFBCB7; max-width:22ch; line-height:1.4 }
@media (max-width:900px){ .scene{ grid-template-columns:1fr } }

/* ── Grilles de cartes ───────────────────────────────────────── */
.duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,1.9vw,26px); margin-top:2.6rem }
.trio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,1.5vw,20px); margin-top:2.4rem }
.carte{ background:var(--carte); border:1px solid var(--trait); border-radius:4px;
  padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column }
.carte h3{ margin-bottom:.7rem }
.carte p{ color:var(--gris); font-size:.97rem; margin-bottom:.9rem }
.carte .lien{ margin-top:auto; padding-top:.6rem; font-family:var(--display);
  font-weight:700; font-size:.95rem; color:var(--vert); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px }
.carte .lien:hover{ text-decoration:underline; text-underline-offset:4px }
.carte .num{ font-family:var(--display); font-weight:800; font-size:.8rem;
  color:var(--terre); letter-spacing:.1em; margin-bottom:1rem }

/* Carte méthode, plus grande */
.methode{ padding:clamp(26px,3vw,42px) }
.methode h3{ font-size:clamp(1.45rem,2.4vw,2rem); letter-spacing:-.02em }
.methode .pour{ font-size:.86rem; color:var(--terre); font-family:var(--display);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.9rem }

/* ── Liste de fonctions travaillées ──────────────────────────── */
.fonctions{ list-style:none; padding:0; margin:2.4rem 0 0;
  border-top:1px solid var(--trait) }
.fonctions li{ display:grid; grid-template-columns:3.2rem 1fr;
  gap:clamp(12px,2vw,32px); align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid var(--trait) }
.fonctions .k{ font-family:var(--display); font-weight:800; color:var(--terre);
  font-size:.86rem; letter-spacing:.06em }
.fonctions .t{ font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,2vw,1.6rem); letter-spacing:-.018em }
.fonctions .d{ color:var(--gris); font-size:.96rem; margin:.35rem 0 0; max-width:60ch }
@media (min-width:760px){
  .fonctions li{ grid-template-columns:3.2rem minmax(0,15rem) minmax(0,1fr) }
  .fonctions .d{ margin:0 }
}

/* ── Bloc citation ───────────────────────────────────────────── */
.citation{ border-left:3px solid var(--vert); padding-left:clamp(18px,2.2vw,30px);
  margin:2.4rem 0 0; max-width:56ch }
.citation blockquote{ margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem,2.3vw,1.75rem); line-height:1.24; letter-spacing:-.02em }
.citation figcaption{ margin-top:.8rem; font-size:.88rem; color:var(--gris) }

/* ── Adresses ────────────────────────────────────────────────── */
.lieux{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2vw,26px); margin-top:2.4rem }
.lieu{ background:var(--carte); border:1px solid var(--trait); border-radius:4px;
  padding:clamp(22px,2.4vw,32px) }
.lieu h3{ margin-bottom:.5rem }
.lieu address{ font-style:normal; color:var(--gris); font-size:.97rem }
.metros{ list-style:none; padding:0; margin:1rem 0 0; display:flex;
  flex-direction:column; gap:.5rem; font-size:.92rem; color:var(--gris) }
.metros li{ display:flex; align-items:center; gap:.6rem }
.ligne{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--vert); color:#fff; font-family:var(--display); font-weight:800;
  font-size:.8rem; flex:none }

/* ── Formulaire ──────────────────────────────────────────────── */
.formulaire{ display:grid; gap:1.05rem; max-width:38rem; margin-top:2.2rem }
.champ{ display:flex; flex-direction:column; gap:.4rem }
.champ label{ font-family:var(--display); font-weight:700; font-size:.9rem }
.champ input,.champ textarea,.champ select{
  font-family:var(--corps); font-size:1rem; color:var(--encre);
  background:var(--carte); border:1px solid var(--trait); border-radius:3px;
  padding:13px 14px; min-height:48px; width:100%; }
.champ textarea{ min-height:150px; resize:vertical }
.champ .aide{ font-size:.85rem; color:var(--gris) }
.paire{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem }
@media (max-width:560px){ .paire{ grid-template-columns:1fr } }

/* ── Ressources ──────────────────────────────────────────────── */
.ressources{ list-style:none; padding:0; margin:2.2rem 0 0;
  border-top:1px solid var(--trait) }
.ressources li{ border-bottom:1px solid var(--trait) }
.ressources a,.ressources .item{ display:grid; grid-template-columns:1fr auto;
  gap:1rem; align-items:baseline; padding:1.05rem 0; text-decoration:none;
  min-height:44px }
.ressources a:hover .titre{ color:var(--vert) }
.ressources .titre{ font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.2rem); transition:color .2s }
.ressources .meta{ font-size:.86rem; color:var(--gris); text-align:right; white-space:nowrap }

/* ── Bande d'appel ───────────────────────────────────────────── */
.appel{ background:var(--vert); color:#fff }
.appel h2{ color:#fff; max-width:20ch }
.appel p{ color:#CBE0D8; max-width:46ch }
.appel .bouton{ background:#fff; color:var(--vert); border-color:#fff }
.appel .bouton:hover{ background:var(--craie); border-color:var(--craie) }

/* ── Pied ────────────────────────────────────────────────────── */
.pied{ border-top:1px solid var(--trait); padding-block:clamp(40px,5vh,62px) 28px }
.pied .grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,44px) }
.pied h2{ font-size:1.06rem; letter-spacing:-.01em }
.pied ul{ list-style:none; padding:0; margin:.9rem 0 0; display:flex;
  flex-direction:column; gap:.15rem }
.pied a{ text-decoration:none; color:var(--gris); font-size:.94rem;
  display:inline-block; padding:11px 0; min-height:44px; line-height:22px }
.pied a:hover{ color:var(--encre); text-decoration:underline; text-underline-offset:4px }
.pied address{ font-style:normal; color:var(--gris); font-size:.94rem; line-height:1.75 }
.mention{ margin-top:clamp(28px,4vh,46px); padding-top:20px;
  border-top:1px solid var(--trait); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  justify-content:space-between; font-size:.85rem; color:var(--gris) }
.mention a{ padding:0; min-height:0 }

/* ── Bannière de page intérieure ─────────────────────────────── */
.banniere{ padding-block:clamp(46px,7vh,86px) clamp(30px,4vh,52px);
  border-bottom:1px solid var(--trait) }
.banniere .chapeau{ max-width:56ch; margin-top:1.2rem }
.fil{ font-size:.85rem; color:var(--gris); margin:0 0 1.4rem }
.fil a{ color:var(--gris) }

/* ══════════════════════════════════════════════════════════════
   Téléphone — l'en-tête passe sur deux rangs, rien ne se cache
   ══════════════════════════════════════════════════════════════
   Pas de tiroir, pas de burger : cinq entrées tiennent sur deux
   lignes et restent lisibles sans geste à deviner (contrôle 3).
   L'en-tête cesse d'être collant sous 820 px — deux rangs collés
   en haut d'un écran de 844 px, ce serait un quart de la page. */
@media (max-width:820px){
  .entete{ position:static }
  .entete .enveloppe{ display:block; padding-block:12px 4px; min-height:0 }
  .marque{ min-height:44px; display:inline-flex; align-items:center }
  .menu{ flex-wrap:wrap; gap:0 1.1rem; border-top:1px solid var(--trait);
    margin-top:4px; padding-top:2px }
  .menu a{ font-size:.9rem; padding:11px 0 }
}
@media (min-width:821px){
  .marque{ min-height:44px; align-items:center }
}

/* Fil d'Ariane : la zone tactile fait la hauteur réglementaire */
.fil a{ display:inline-block; padding:11px 0; min-height:44px; line-height:22px }
.fil{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap }

/* Filets de sécurité contre le débordement horizontal */
.phrase{ overflow-wrap:anywhere }
.tableau{ min-width:0 }
.enveloppe{ min-width:0 }
.scene > *,.duo > *,.trio > *,.lieux > *{ min-width:0 }