@font-face { font-family: "Anybody"; src: url("/assets/fonts/anybody.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Gochi"; src: url("/assets/fonts/gochi.woff2") format("woff2"); font-display: swap; }

:root {
  --orange: #E94E1A; --rade: #0F2742; --ecume: #F4F5F0; --blanc: #FFFFFF;
  --jaune: #FFD23F; --rose: #FF9CC2; --menthe: #7ED8BE; --ciel: #8CCBFF;
  --fond: var(--ecume); --texte: var(--rade);
  --logo-ink: var(--rade); --logo-accent: var(--orange);
  --marge: clamp(16px, 4vw, 56px);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond: var(--ecume); --texte: var(--rade); color-scheme: light; } }
:root[data-theme="dark"] { --fond: var(--ecume); --texte: var(--rade); }
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body { background: var(--fond); color: var(--texte); font-family: "Anybody", system-ui, sans-serif; font-size: clamp(16px, .9vw + 11px, 19px); line-height: 1.5; overflow-x: hidden; font-variation-settings: "wdth" 100; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.main-lev { font-family: "Gochi", "Comic Sans MS", cursive; font-weight: 400; letter-spacing: .01em; }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--marge) 12px; pointer-events: none; }
.entete > * { pointer-events: auto; }
.entete { transition: background .35s, box-shadow .35s; }
.entete.sur-fond { background: color-mix(in srgb, var(--ecume) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2.5px 0 var(--rade); }
.entete .logo { width: 96px; height: auto; }
.menu { display: flex; gap: 6px; background: var(--blanc); border: 2.5px solid var(--rade); border-radius: 999px; padding: 5px; box-shadow: 0 4px 0 var(--rade); }
.menu a { text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; transition: background .25s, transform .3s var(--ressort); }
.menu a:hover { background: var(--jaune); transform: rotate(-3deg) scale(1.06); }
.bouton {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-weight: 800; font-size: 16px; padding: 13px 22px; border-radius: 999px;
  background: var(--orange); color: var(--blanc); border: 2.5px solid var(--rade); box-shadow: 0 5px 0 var(--rade);
  transition: transform .3s var(--ressort), box-shadow .2s;
}
.bouton:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 8px 0 var(--rade); }
.bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rade); }
.bouton.blanc { background: var(--blanc); color: var(--rade); }
@media (max-width: 1080px) { .menu { display: none; } }
.entete .bouton { white-space: nowrap; }
@media (max-width: 380px) { .entete .bouton { padding: 11px 14px; font-size: 14px; } .son { width: 42px; height: 42px; } .entete .logo { width: 84px; } }

/* ---------- Ouverture : les Bavards ---------- */
.ouverture { min-height: 100svh; padding: calc(env(safe-area-inset-top, 0px) + 92px) var(--marge) 40px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; position: relative; }
.salut { font-size: clamp(30px, 3.4vw, 54px); color: var(--orange); transform: rotate(-4deg); width: fit-content; position: relative; margin-left: 4%; }
.salut svg { position: absolute; left: 100%; top: 60%; width: 90px; margin-left: 6px; }
.arene { overflow-x: clip; position: relative; min-height: clamp(260px, 36svh, 420px); touch-action: pan-y; margin-inline: calc(-1 * var(--marge)); }
.bavard { position: absolute; left: 0; top: 0; width: var(--t, 180px); height: var(--t, 180px); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; will-change: transform; }
.bavard:active { cursor: grabbing; }
html { -webkit-tap-highlight-color: transparent; }
.bavard { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none; border-radius: 50%; }
.bavard:focus:not(:focus-visible) { outline: none; }
.bavard:focus-visible { outline: none; }
html.clavier .bavard:focus-visible { outline: 3px dashed var(--orange); outline-offset: 4px; }
.bavard svg { width: 100%; height: 100%; overflow: visible; transition: transform .35s var(--ressort); }
.bavard:hover svg { transform: scale(1.06) rotate(-4deg); }
.bavard .nom-bavard { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px) rotate(-3deg) scale(.85); transform-origin: 50% 100%; white-space: nowrap; font-size: 20px; line-height: 1; color: var(--rade); background: var(--blanc); border: 2px solid var(--rade); border-radius: 999px; padding: 6px 12px 4px; box-shadow: 0 3px 0 var(--rade); opacity: 0; transition: opacity .2s, transform .35s var(--ressort); pointer-events: none; z-index: 2; }
.bavard:hover .nom-bavard { transform: translate(-50%, -10px) rotate(-3deg) scale(1); }
.bavard:has(.dit.on) .nom-bavard { opacity: 0 !important; }
.bavard:hover .nom-bavard, .bavard:focus-visible .nom-bavard { opacity: 1; }
@media (hover: none), (pointer: coarse) { .bavard .nom-bavard { display: none; } }
.doigt { display: none; } @media (hover: none), (pointer: coarse) { .souris { display: none; } .doigt { display: inline; } }
html, body { overflow-x: clip; }
.dit { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px) scale(.4); transform-origin: 50% 100%; background: var(--blanc); border: 2.5px solid var(--rade); border-radius: 18px; padding: 8px 14px; font-weight: 700; font-size: 15px; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .45s var(--ressort); pointer-events: none; box-shadow: 0 4px 0 var(--rade); z-index: 2; }
.dit.on { opacity: 1; transform: translate(-50%, -12px) scale(1); }
.consigne { position: absolute; right: 2%; top: 4%; font-size: clamp(20px, 1.8vw, 28px); transform: rotate(5deg); color: var(--rade); opacity: .8; display: flex; align-items: center; gap: 6px; }
.consigne svg { width: 60px; transform: scaleX(-1) rotate(20deg); }
.titre-ouverture { font-weight: 800; font-size: clamp(44px, 7.6vw, 132px); line-height: .9; letter-spacing: -.025em; font-variation-settings: "wdth" 78; max-width: 14ch; position: relative; z-index: 2; }
.titre-ouverture .bulle-mot { display: inline-block; background: var(--orange); color: var(--blanc); border: 3px solid var(--rade); border-radius: .35em; padding: 0 .16em .04em; box-shadow: 0 .08em 0 var(--rade); transform: rotate(-2deg); }
.sous { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-top: 22px; }
.sous p { max-width: 34rem; font-size: clamp(17px, 1.2vw + 9px, 21px); font-weight: 500; }
.annot { position: absolute; font-size: clamp(22px, 2vw, 32px); color: var(--orange); transform: rotate(-6deg); right: 6%; bottom: -10px; display: flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .consigne, .annot { display: none; } .salut svg { width: 60px; } }
@media (max-width: 440px) { .salut { margin-left: 0; } .salut svg { left: auto; right: 4px; top: 100%; width: 46px; margin: 2px 0 0; transform: rotate(40deg); } }

/* ---------- Ayco est une… ---------- */
.est-une { padding: clamp(80px, 11vw, 160px) var(--marge); text-align: center; position: relative; overflow: hidden; }
.est-une .ligne1 { font-size: clamp(26px, 2.4vw, 40px); color: var(--orange); transform: rotate(-3deg); display: inline-block; }
.est-une h2 { font-weight: 800; font-size: clamp(44px, 8vw, 140px); line-height: .92; letter-spacing: -.03em; font-variation-settings: "wdth" 70; margin-top: 12px; }
.mot-tourne { display: inline-grid; vertical-align: bottom; }
.mot-tourne span { grid-area: 1 / 1; padding: 0 .14em; border-radius: .3em; border: 3px solid var(--rade); box-shadow: 0 .07em 0 var(--rade); transform: rotate(var(--r, -2deg)) translateY(30%) scale(.7); opacity: 0; transition: transform .6s var(--ressort), opacity .3s; }
.mot-tourne span.on { opacity: 1; transform: rotate(var(--r, -2deg)); }
.est-une .basee { margin: 26px auto 0; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.15; display: block; max-width: 22ch; text-wrap: balance; transform: rotate(2deg); }
.est-une .basee svg { display: inline-block; width: .95em; height: auto; vertical-align: -.18em; margin-right: .25em; }
.etiquette { display: inline-block; margin-top: 30px; }

/* ---------- Projets ---------- */
.projets { padding: 20px var(--marge) clamp(80px, 10vw, 150px); }
.entete-sect { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 56px); }
.entete-sect h2 { font-weight: 800; font-size: clamp(38px, 5.4vw, 92px); line-height: .92; letter-spacing: -.025em; font-variation-settings: "wdth" 76; }
.entete-sect .main-lev { font-size: clamp(22px, 1.8vw, 30px); color: var(--orange); transform: rotate(-3deg); }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.carte { position: relative; border: 3px solid var(--rade); border-radius: 30px; overflow: hidden; background: var(--rade); box-shadow: 0 8px 0 var(--rade); transform: rotate(var(--r)); transition: transform .5s var(--ressort), box-shadow .3s; aspect-ratio: 4 / 5; text-decoration: none; }
.carte:nth-child(1) { --r: -2.5deg; } .carte:nth-child(2) { --r: 1.5deg; margin-top: 40px; } .carte:nth-child(3) { --r: -1deg; }
.carte:hover { transform: rotate(0) translateY(-8px) scale(1.02); box-shadow: 0 16px 0 var(--rade); }
.carte video, .carte img { width: 100%; height: 100%; object-fit: cover; }
.carte .pastille { position: absolute; left: 14px; top: 14px; background: var(--jaune); color: var(--rade); border: 2.5px solid var(--rade); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 14px; }
.carte .legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: var(--blanc); background: linear-gradient(transparent, rgba(15, 39, 66, .85)); font-weight: 700; font-size: 18px; line-height: 1.2; }
@media (max-width: 820px) { .cartes { grid-template-columns: 1fr; } .carte { aspect-ratio: 4 / 4.4; } .carte:nth-child(2) { margin-top: 0; } }

/* ---------- Services avec leur bavard ---------- */
.services { background: var(--blanc); border-top: 3px solid var(--rade); border-bottom: 3px solid var(--rade); padding: clamp(80px, 10vw, 150px) var(--marge); }
.liste-services { list-style: none; display: grid; gap: 0; }
.liste-services li { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 26rem); gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(20px, 2.6vw, 34px) 0; border-top: 2.5px dashed color-mix(in srgb, var(--rade) 35%, transparent); }
.liste-services li:last-child { border-bottom: 2.5px dashed color-mix(in srgb, var(--rade) 35%, transparent); }
.liste-services .mini { width: 110px; height: 110px; transition: transform .5s var(--ressort); }
.liste-services li:hover .mini { transform: rotate(-10deg) scale(1.12) translateY(-6px); }
.liste-services h3 { container-type: inline-size; min-width: 0; font-weight: 800; line-height: .95; letter-spacing: -.02em; font-variation-settings: "wdth" 70; transition: font-variation-settings .5s var(--ressort); }
.liste-services h3 span { display: block; font-size: min(clamp(30px, 4vw, 68px), 11cqi); }
.liste-services li:hover h3 { font-variation-settings: "wdth" 110; }
.liste-services p { font-size: 17px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.puces span { font-size: 13px; font-weight: 700; border: 2px solid var(--rade); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 820px) { .liste-services li { grid-template-columns: 80px 1fr; } .liste-services li > div:last-child { grid-column: 1 / -1; } .liste-services .mini { width: 80px; height: 80px; } }

/* ---------- Booj ---------- */
.booj { background: var(--rade); color: var(--ecume); padding: clamp(80px, 10vw, 150px) var(--marge); position: relative; overflow: hidden; }
.booj h2 { font-weight: 800; font-size: clamp(40px, 6.4vw, 112px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 72; max-width: 13ch; }
.booj .main-lev { color: var(--jaune); font-size: clamp(22px, 2vw, 32px); transform: rotate(-3deg); display: inline-block; margin-bottom: 14px; }
.booj p { max-width: 36rem; margin-top: 24px; font-size: clamp(17px, 1.1vw + 9px, 21px); }
.autocollants { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.autocollants a { text-decoration: none; background: var(--jaune); color: var(--rade); border: 3px solid var(--ecume); border-radius: 22px; padding: 14px 22px; transform: rotate(var(--r)); transition: transform .45s var(--ressort); display: grid; }
.autocollants a:nth-child(1) { --r: -4deg; } .autocollants a:nth-child(2) { --r: 3deg; background: var(--rose); } .autocollants a:nth-child(3) { --r: -2deg; background: var(--menthe); }
.autocollants a:hover { transform: rotate(0) scale(1.08); }
.autocollants b { font-size: clamp(22px, 2.2vw, 34px); font-weight: 800; line-height: 1.05; font-variation-settings: "wdth" 80; }
.autocollants span { font-size: 14px; font-weight: 700; }

/* ---------- Raconte-nous ---------- */
.projet { padding: clamp(80px, 10vw, 150px) var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: clamp(30px, 5vw, 80px); align-items: start; }
.projet h2 { font-weight: 800; font-size: clamp(40px, 6vw, 104px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 72; }
.projet .chapo { margin-top: 20px; max-width: 30rem; font-size: 19px; }
.projet .guide { width: 160px; margin-top: 30px; }
.fiche { background: var(--blanc); border: 3px solid var(--rade); border-radius: 30px; box-shadow: 0 8px 0 var(--rade); padding: clamp(22px, 3vw, 36px); }
.fiche .etape-n { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.barre { height: 10px; border: 2px solid var(--rade); border-radius: 999px; margin: 10px 0 22px; overflow: hidden; }
.barre i { display: block; height: 100%; width: 33%; background: var(--orange); transition: width .5s var(--ressort); }
.fiche fieldset { border: 0; display: none; }
.fiche fieldset.on { display: block; animation: arrive .5s var(--ressort); }
@keyframes arrive { from { opacity: 0; transform: translateX(30px) rotate(1deg); } to { opacity: 1; transform: none; } }
.fiche legend { font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; margin-bottom: 16px; font-variation-settings: "wdth" 85; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-block; border: 2.5px solid var(--rade); border-radius: 999px; padding: 9px 16px; font-weight: 700; transition: background .2s, transform .35s var(--ressort); }
.choix input:checked + span { background: var(--jaune); transform: rotate(-3deg) scale(1.05); }
.choix input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: 15px; }
.champ input, .champ textarea { font: inherit; font-weight: 500; font-size: 17px; border: 2.5px solid var(--rade); border-radius: 14px; padding: 12px 14px; background: var(--ecume); color: var(--rade); }
.champ textarea { min-height: 90px; resize: vertical; }
.nav-fiche { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.retour { background: none; border: 0; font-weight: 700; text-decoration: underline; cursor: pointer; visibility: hidden; }
.retour.on { visibility: visible; }
.fiche .erreur { color: var(--orange); font-weight: 700; font-size: 15px; margin-top: 10px; min-height: 1.4em; }
@media (max-width: 900px) { .projet { grid-template-columns: 1fr; } .projet .guide { display: none; } }

/* ---------- Pied, avec ses autocollants qui tombent ---------- */
.pied { background: var(--orange); color: var(--rade); border-top: 3px solid var(--rade); position: relative; overflow: hidden; padding: clamp(60px, 8vw, 110px) var(--marge) calc(env(safe-area-inset-bottom, 0px) + 30px); min-height: 92svh; display: grid; grid-template-rows: auto 1fr auto; --logo-ink: var(--rade); --logo-accent: var(--blanc); }
.pied .grand { font-weight: 800; font-size: clamp(48px, 9vw, 160px); line-height: .88; letter-spacing: -.03em; font-variation-settings: "wdth" 70; max-width: 12ch; position: relative; z-index: 2; pointer-events: none; }
.pied .coord { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 24px; font-weight: 700; font-size: clamp(17px, 1.3vw, 22px); position: relative; z-index: 2; }
.pied .coord a { text-decoration: none; border-bottom: 2.5px solid var(--rade); }
.pied .heure { font-size: 22px; margin-top: 10px; position: relative; z-index: 2; }
.tas { position: absolute; left: 0; right: 0; bottom: 170px; height: 42%; z-index: 1; }
@media (max-width: 760px) { .tas { height: 30%; bottom: 300px; } .pied { min-height: 100svh; } .pied .bas { flex-direction: column; align-items: flex-start; gap: 6px; } .pied .bas .logo { display: none; } }
.pied .bas { padding-top: 14px; border-top: 2.5px solid var(--rade); }
.tas .bavard { --t: 120px; }
.tas .collant { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.pied .bas { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: end; font-size: 14px; font-weight: 600; pointer-events: none; }
.pied .bas a, .pied .bas .logo { pointer-events: auto; }
.pied .logo { width: 140px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Écran de chargement */
.chargement { position: fixed; inset: 0; z-index: 100; background: var(--orange); color: var(--rade); display: grid; place-items: center; align-content: center; gap: 30px; transition: clip-path .9s cubic-bezier(.76, 0, .24, 1); clip-path: inset(0 0 0 0); }
.chargement.fini { clip-path: inset(0 0 100% 0); }
.charg-bulles { display: flex; gap: clamp(6px, 1.5vw, 18px); }
.charg-bulles span { width: clamp(52px, 8vw, 96px); height: clamp(52px, 8vw, 96px); transform: scale(0) rotate(-30deg); transition: transform .6s var(--ressort); }
.charg-bulles span.on { transform: scale(1) rotate(0); }
.charg-txt { display: grid; justify-items: center; gap: 4px; }
#charg-n { font-weight: 900; font-size: clamp(70px, 14vw, 200px); line-height: .85; font-variation-settings: "wdth" 60; font-variant-numeric: tabular-nums; }
.charg-txt .main-lev { font-size: clamp(22px, 2vw, 32px); }
/* Les accessoires dépassent de la bulle (chapeau, clap, béret) : jamais coupés, où que soit le Bavard */
[data-bavard] svg, .bavard svg { overflow: visible; }
.projet .guide { margin-top: 50px; }


[hidden] { display: none !important; }

/* Le podcast */
.podcast { background: var(--rade); color: var(--ecume); padding: clamp(80px, 10vw, 150px) var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); align-items: center; position: relative; overflow: hidden; }
.podcast .main-lev { color: var(--jaune); font-size: clamp(22px, 2vw, 32px); transform: rotate(-3deg); display: inline-block; margin-bottom: 12px; }
.podcast h2 { font-weight: 900; font-size: clamp(40px, 6vw, 104px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 72; }
.podcast p { margin-top: 22px; max-width: 34rem; font-size: clamp(17px, 1.1vw + 9px, 21px); }
.podcast .atouts { list-style: none; display: grid; gap: 14px; margin-top: 30px; }
.podcast .atouts li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-weight: 600; }
.podcast .atouts li::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--jaune); border: 2.5px solid var(--ecume); margin-top: 2px; }
.podcast .atouts b { color: var(--jaune); }
.podcast .bouton { margin-top: 34px; }
.plateau { position: relative; aspect-ratio: 1; max-width: 520px; justify-self: center; width: 100%; }
.plateau .table { position: absolute; left: 4%; right: 4%; bottom: 10%; height: 14%; background: var(--orange); border: 3px solid var(--ecume); border-radius: 18px; }
.plateau .hote, .plateau .invite { position: absolute; bottom: 20%; width: 46%; }
.plateau .hote { left: 2%; } .plateau .invite { right: 2%; transform: scaleX(-1); }
.plateau .rec { position: absolute; top: 4%; right: 6%; display: flex; gap: 8px; align-items: center; font-weight: 900; font-size: 18px; background: var(--ecume); color: var(--rade); border-radius: 999px; padding: 6px 14px; border: 2.5px solid var(--ecume); }
.plateau .rec i { width: 12px; height: 12px; border-radius: 50%; background: #E63946; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.ondes-son { position: absolute; left: 30%; right: 30%; top: 16%; display: flex; gap: 5px; align-items: center; justify-content: center; height: 60px; }
.ondes-son i { width: 7px; border-radius: 6px; background: var(--jaune); animation: onde 1s ease-in-out infinite; }
@keyframes onde { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@media (max-width: 900px) { .podcast { grid-template-columns: 1fr; } .plateau { max-width: 380px; } }

/* Sommeil des Bavards */
.ferme, .zzz { display: none; }
body.dort .arene .yeux { display: none; }
body.dort .arene .ferme { display: inline; }
body.dort .arene .zzz { display: inline; animation: zzz 1.6s ease-in-out infinite; }
@keyframes zzz { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }
body.dort .arene .bavard svg { animation: souffle 2.4s ease-in-out infinite; }
@keyframes souffle { 50% { transform: scale(1.03, .97) translateY(3px); } }

/* Neige de Noël dans l’ouverture */
.flocons { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.flocons i { position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--rade); animation: tombe linear infinite; }
@keyframes tombe { to { transform: translate(var(--dx, 20px), 110svh); } }

/* L’équipe */
.equipe { padding: clamp(80px, 10vw, 150px) var(--marge); }
.equipe-grille { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.membre { position: relative; text-align: center; }
.membre button { all: unset; display: block; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.membre .cadre { position: relative; aspect-ratio: 1; perspective: 900px; }
.membre .faces { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ressort); }
.membre .face-b, .membre .face-p { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.membre .face-p { transform: rotateY(180deg); border-radius: 30% 30% 30% 8%; overflow: hidden; border: 3px solid var(--rade); box-shadow: 0 6px 0 var(--rade); background: var(--c, var(--jaune)); }
.membre .face-p img { width: 100%; height: 100%; object-fit: cover; }
.membre .face-p .bientot { font-family: "Gochi", cursive; font-size: clamp(18px, 1.6vw, 24px); padding: 18px; line-height: 1.15; }
.membre .face-b > div { width: 92%; height: 92%; transition: transform .45s var(--ressort); }
.membre button:hover .face-b > div { transform: rotate(-6deg) scale(1.05); }
.membre.retourne .faces { transform: rotateY(180deg); }
@media (hover: hover) { .membre button:hover .faces { transform: rotateY(180deg); } }
.membre h3 { margin-top: 14px; font-weight: 900; font-size: clamp(22px, 2vw, 32px); line-height: 1; font-variation-settings: "wdth" 80; }
.membre .role { font-size: 15px; font-weight: 600; opacity: .75; }
.membre button:focus-visible { outline: 3px dashed var(--orange); outline-offset: 6px; border-radius: 20px; }
.equipe .astuce { margin-top: 26px; font-size: 22px; color: var(--orange); transform: rotate(-2deg); width: fit-content; }
@media (max-width: 1000px) { .equipe-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 620px) { .equipe-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .equipe-grille li:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; justify-self: center; } }

/* Étape 4 : le créneau */
.creneau-txt { margin-bottom: 16px; }
.creneau-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.calendly { margin-top: 16px; border: 2.5px solid var(--rade); border-radius: 18px; overflow: hidden; height: 640px; background: var(--ecume); }
.calendly iframe { width: 100%; height: 100%; border: 0; }
.mentions-cal { font-size: 13px; margin-top: 10px; opacity: .8; }
.mentions-cal a { color: inherit; }
.lien-alt { font-weight: 700; font-size: 15px; }

/* Bouton son et secousse */
.entete-droite { display: flex; align-items: center; gap: 10px; }
.son { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--blanc); border: 2.5px solid var(--rade); box-shadow: 0 4px 0 var(--rade); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ressort); -webkit-tap-highlight-color: transparent; }
.son:hover { transform: rotate(-8deg) scale(1.06); }
.son svg { width: 24px; height: 24px; }
.son .barre-son { transition: opacity .2s; }
.son[aria-pressed="true"] .barre-son { opacity: 0; }
.son[aria-pressed="false"] .ondes { opacity: 0; }
.secoue { display: none; position: absolute; right: 4%; top: 8%; font-size: 20px; transform: rotate(5deg); color: var(--rade); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--orange); }
@media (hover: none) and (pointer: coarse) { .secoue { display: block; } }

/* Référencement : ligne de lieu dans le titre principal */
.h1-lieu { display: block; font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; letter-spacing: .01em; font-variation-settings: "wdth" 100; margin-bottom: 12px; color: var(--orange); }
.liste-services h3 a { text-decoration: none; color: inherit; }
.liste-services h3 a::after { content: ""; position: absolute; inset: 0; }
.liste-services li { position: relative; }
.liste-services h3 a:focus-visible { outline: 3px dashed var(--orange); outline-offset: 4px; }

/* Zone d’intervention */
.zone { padding: clamp(80px, 10vw, 150px) var(--marge) 0; }
.zone-txt { max-width: 40rem; font-size: clamp(17px, 1.1vw + 9px, 21px); }
.villes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.villes li { border: 2.5px solid var(--rade); border-radius: 999px; padding: 8px 16px; font-weight: 700; background: var(--blanc); box-shadow: 0 4px 0 var(--rade); transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ressort), background .2s; }
.villes li:nth-child(3n) { --r: -2deg; } .villes li:nth-child(3n+1) { --r: 1.5deg; }
.villes li:hover { transform: rotate(0) translateY(-3px); background: var(--jaune); }

/* FAQ */
.faq { padding: clamp(80px, 10vw, 150px) var(--marge); }
.faq-liste { display: grid; gap: 14px; max-width: 60rem; }
.faq details { background: var(--blanc); border: 2.5px solid var(--rade); border-radius: 22px; box-shadow: 0 5px 0 var(--rade); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; font-weight: 800; font-size: clamp(18px, 1.4vw, 22px); font-variation-settings: "wdth" 88; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(var(--blanc), var(--blanc)) center / 14px 3px no-repeat, linear-gradient(var(--blanc), var(--blanc)) center / 3px 14px no-repeat, var(--orange); border: 2.5px solid var(--rade); transition: transform .4s var(--ressort); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; max-width: 46rem; }

/* Pied : liens utiles */
.pied-liens { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; font-weight: 700; font-size: 15px; }
.pied-liens a { text-decoration: none; border-bottom: 2px solid transparent; }
.pied-liens a:hover { border-bottom-color: var(--rade); }

/* Les Bavards du pied tombent dans leur propre zone, jamais sur le texte */
.zone-tas { position: relative; min-height: clamp(190px, 26svh, 300px); margin-top: 20px; }
.zone-tas .tas { position: absolute; inset: 0; height: auto; bottom: 0; }
.pied { min-height: 0; }

/* =====================================================================
   PAGES ANNEXES (services, agence, rendez-vous, contact…)
   ===================================================================== */
.page-annexe main { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
.page-tete { padding: clamp(24px, 4vw, 50px) var(--marge) clamp(50px, 7vw, 100px); position: relative; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: clamp(20px, 3vw, 40px); }
.ariane li + li::before { content: "›"; margin-right: 6px; opacity: .5; }
.ariane a { text-decoration: none; border-bottom: 2px solid transparent; }
.ariane a:hover { border-bottom-color: var(--orange); }
.ariane [aria-current] { opacity: .65; }
.page-tete-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(20px, 5vw, 80px); align-items: center; }
.surtitre { color: var(--orange); font-size: clamp(22px, 2vw, 32px); transform: rotate(-3deg); width: fit-content; margin-bottom: 6px; }
.page-tete h1 { font-weight: 900; font-size: clamp(44px, 7vw, 120px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 72; max-width: 14ch; text-wrap: balance; }
.page-tete .chapo { margin-top: 22px; max-width: 36rem; font-size: clamp(17px, 1.2vw + 9px, 22px); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.tete-bavard { justify-self: center; width: min(100%, 380px); aspect-ratio: 1; position: relative; }
.tete-bavard::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: color-mix(in srgb, var(--c) 28%, #fff); border: 3px solid var(--rade); box-shadow: 0 8px 0 var(--rade); }
.tete-bavard > div { position: relative; width: 100%; height: 100%; animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(-3deg); } }
@media (max-width: 760px) { .page-tete-grille { grid-template-columns: 1fr; } .tete-bavard { width: 56vw; order: -1; margin: 30px auto -6px; } }

.vitrine { margin: 0 var(--marge); border: 3px solid var(--rade); border-radius: clamp(22px, 3vw, 40px); overflow: hidden; box-shadow: 0 10px 0 var(--rade); aspect-ratio: 16 / 8; background: var(--rade); }
.vitrine img, .vitrine video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .vitrine { aspect-ratio: 4 / 4.4; } }

.recit { padding: clamp(80px, 11vw, 160px) var(--marge); max-width: 1400px; }
.recit .main-lev { color: var(--orange); font-size: clamp(22px, 2vw, 32px); display: inline-block; transform: rotate(-3deg); }
.recit p { max-width: 44rem; font-size: clamp(17px, 1.1vw + 9px, 21px); margin-top: 18px; }
.recit .recit-grand { max-width: 34ch; font-weight: 700; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.06; letter-spacing: -.02em; font-variation-settings: "wdth" 84; margin-top: 12px; }

.offres, .etapes-sect, .galerie-sect { padding: 0 var(--marge) clamp(80px, 10vw, 150px); }
.offres-grille { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.offres-grille li { background: var(--blanc); border: 3px solid var(--rade); border-radius: 26px; padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 6px 0 var(--rade); transform: rotate(var(--r)); transition: transform .45s var(--ressort), background .3s; }
.offres-grille li:hover { transform: rotate(0) translateY(-6px); background: var(--jaune); }
.offres-grille .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--blanc); border: 2.5px solid var(--rade); font-weight: 900; font-size: 15px; }
.offres-grille h3 { margin-top: 14px; font-weight: 900; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.05; font-variation-settings: "wdth" 85; }
.offres-grille p { margin-top: 8px; font-size: 16px; }
@media (max-width: 980px) { .offres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .offres-grille { grid-template-columns: 1fr; } }

.etapes { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); position: relative; }
.etapes::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; border-top: 3px dashed var(--rade); opacity: .35; }
.etapes li { counter-increment: etape; position: relative; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--jaune); border: 3px solid var(--rade); box-shadow: 0 5px 0 var(--rade); font-weight: 900; font-size: 24px; position: relative; }
.etapes h3 { margin-top: 18px; font-weight: 900; font-size: clamp(20px, 1.6vw, 26px); font-variation-settings: "wdth" 85; }
.etapes p { margin-top: 6px; font-size: 16px; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; row-gap: 34px; } .etapes::before { display: none; } }
@media (max-width: 520px) { .etapes { grid-template-columns: 1fr; } }

.galerie-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.galerie-grille figure { border: 3px solid var(--rade); border-radius: 26px; overflow: hidden; box-shadow: 0 8px 0 var(--rade); transform: rotate(var(--r)); transition: transform .5s var(--ressort); aspect-ratio: 4 / 5; background: var(--rade); }
.galerie-grille figure:hover { transform: rotate(0) scale(1.02); }
.galerie-grille img, .galerie-grille video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .galerie-grille { grid-template-columns: 1fr; } .galerie-grille figure { aspect-ratio: 4 / 4.4; } }

.appel { background: var(--orange); color: var(--rade); border-top: 3px solid var(--rade); padding: clamp(80px, 10vw, 140px) var(--marge); text-align: center; display: grid; justify-items: center; }
.appel-bavard { width: clamp(110px, 12vw, 160px); margin-bottom: 10px; animation: flotte 4s ease-in-out infinite; }
.appel h2 { font-weight: 900; font-size: clamp(40px, 6.4vw, 110px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 70; max-width: 14ch; text-wrap: balance; }
.appel p { margin-top: 18px; max-width: 34rem; font-size: clamp(17px, 1.1vw + 9px, 21px); font-weight: 500; }
.appel .actions { justify-content: center; }
.lien-fort { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.appel + .pied { border-top: 0; }

.rdv, .contact, .prose-sect { padding: 0 var(--marge) clamp(80px, 10vw, 140px); }
.faits { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.faits li { background: var(--blanc); border: 3px solid var(--rade); border-radius: 22px; padding: 18px 20px; box-shadow: 0 5px 0 var(--rade); display: grid; }
.faits b { font-size: clamp(20px, 1.6vw, 26px); font-weight: 900; font-variation-settings: "wdth" 85; }
.faits span { font-size: 15px; }
@media (max-width: 700px) { .faits { grid-template-columns: 1fr; } }
.rdv-fiche h2, .carte-coord h2 { font-weight: 900; font-size: clamp(26px, 2.4vw, 38px); font-variation-settings: "wdth" 80; margin-bottom: 10px; }
.rdv-fiche > p { margin-bottom: 16px; font-size: 15px; }
.rdv-fiche a, .contact a { color: inherit; }

.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.contact-fiche .besoins { border: 0; margin: 6px 0 16px; }
.contact-fiche .besoins legend { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 6px 0 20px; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--orange); flex: 0 0 auto; }
.cache { position: absolute; left: -9999px; }
.merci { background: var(--menthe); border: 2.5px solid var(--rade); border-radius: 16px; padding: 14px 18px; font-weight: 800; margin-bottom: 18px; }
.carte-coord { background: var(--rade); color: var(--ecume); border: 3px solid var(--rade); border-radius: 30px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 8px 0 var(--orange); }
.carte-coord p { margin-bottom: 10px; font-weight: 600; }
.carte-coord a:not(.bouton) { color: var(--ecume); }
.carte-coord .bouton { margin-top: 12px; }
.coord-bavard { width: 110px; margin: -70px 0 6px auto; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .champs { grid-template-columns: 1fr; } .coord-bavard { margin-top: -60px; } }

.prose { max-width: 48rem; background: var(--blanc); border: 3px solid var(--rade); border-radius: 30px; padding: clamp(24px, 4vw, 50px); box-shadow: 0 8px 0 var(--rade); }
.prose h2 { font-weight: 900; font-size: clamp(24px, 2.2vw, 34px); font-variation-settings: "wdth" 82; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-weight: 800; font-size: 20px; margin: 20px 0 8px; }
.prose p, .prose li { font-size: 16px; margin-bottom: 10px; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--orange); font-weight: 700; }
.page-annexe .booj { margin-top: 0; }
.page-annexe .services { border-top: 3px solid var(--rade); }

/* Le jeu Bavards Express */
.jeu { padding: 0 var(--marge) clamp(80px, 10vw, 140px); }
.jeu-grille { display: grid; gap: 18px; justify-items: start; }
.jeu-txt { max-width: 36rem; font-size: clamp(17px, 1.1vw + 9px, 21px); }
.jeu-carte { width: min(100%, 520px); aspect-ratio: 9 / 14; max-height: 80svh; border: 3px solid var(--rade); border-radius: 30px; box-shadow: 0 8px 0 var(--rade); overflow: hidden; background: var(--jaune); position: relative; }
.jeu-accueil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.jeu-accueil b { font-weight: 900; font-size: clamp(34px, 4vw, 54px); line-height: .95; font-variation-settings: "wdth" 75; margin-bottom: 10px; }
.jeu-accueil .main-lev { font-size: 24px; color: var(--orange); transform: rotate(-3deg); }
.jeu-bavards { display: flex; gap: 6px; margin-bottom: 8px; }
.jeu-bavards > div { width: clamp(70px, 9vw, 100px); animation: flotte 3s ease-in-out infinite; }
.jeu-bavards > div:nth-child(2) { animation-delay: -1s; } .jeu-bavards > div:nth-child(3) { animation-delay: -2s; }
.jeu-zone { position: absolute; inset: 0; background: var(--blanc); }
.jeu-zone iframe { width: 100%; height: 100%; border: 0; }