@font-face { font-family: "Kanit"; src: url("polices/kanit-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("polices/kanit-800i.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("polices/overpass.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --blanc: #FFFFFF; --craie: #F6F7F0; --vert: #9BCB2E; --vert-2: #6FAE22; --vert-pale: #E4F2B6; --vert-nuit: #1F3A12;
  --orange: #F26A1B; --orange-2: #D9530C; --route: #1B1C1E; --route-2: #26282B; --encre: #141515; --gris: #4D5248;
  --titres: "Kanit", "Arial Narrow", system-ui, sans-serif; --texte: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gout: 16px; --entete: 64px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}
@media (min-width: 761px) { :root { --gout: 40px; --entete: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body { margin: 0; background: var(--blanc); color: var(--encre); font: 400 17px/1.55 var(--texte); overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--titres); font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
blockquote { margin: 0; }
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.sep { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: currentColor; opacity: .7; vertical-align: .22em; margin: 0 .12em; }
.enveloppe { width: min(100% - 2 * var(--gout), 1240px); margin-inline: auto; }

/* titre découpé (procédé) : caché jusqu'à son découpage, visible après 3 s même sans script */
.js [data-titre-decoupe]:not(.pret) { visibility: hidden; animation: secours-visible 0s linear 3s forwards; }
@keyframes secours-visible { to { visibility: visible; } }
[data-titre-decoupe] > div[style*="clip"] { padding-block: 0.14em; margin-block: -0.14em; }

/* le plot du logo, en puce */
.puce-plot { display: inline-block; width: 0.95em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.12em; flex: none;
  background: linear-gradient(transparent 30%, #fff 30% 42%, transparent 42% 58%, #fff 58% 68%, transparent 68%), var(--orange);
  clip-path: polygon(38% 0, 62% 0, 82% 86%, 100% 86%, 100% 100%, 0 100%, 0 86%, 18% 86%); }
.puce-blanche { background: linear-gradient(transparent 30%, var(--orange) 30% 42%, transparent 42% 58%, var(--orange) 58% 68%, transparent 68%), #fff; }

.etiquette, .surtitre { display: inline-flex; align-items: center; font: italic 800 16px/1.2 var(--titres); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.surtitre { color: var(--orange-2); }
.etiquette .sep, .surtitre .sep { margin: 0 .55em; }

/* boutons penchés comme les lettres du logo */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 10px; transform: skewX(-9deg);
  font: 700 17px/1.1 var(--texte); text-decoration: none; border: 2px solid transparent; transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s ease, background-color .2s ease; }
.bouton > span { display: inline-flex; align-items: center; gap: 10px; transform: skewX(9deg); }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:hover { transform: skewX(-9deg) translateY(-2px); }
.bouton:active { transform: skewX(-9deg) translateY(1px) scale(.98); }
.bouton:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.bouton-noir { background: var(--route); color: #fff; box-shadow: 0 6px 0 -1px rgba(0,0,0,.18); }
.bouton-noir svg { color: var(--vert); }
.bouton-contour { border-color: var(--route); color: var(--encre); background: transparent; }
.bouton-vert { background: var(--vert); color: var(--encre); }
.bouton-contour-clair { border-color: rgba(255,255,255,.7); color: #fff; }

/* — en-tête — */
.entete { position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; height: var(--entete); padding: 0 var(--gout); background: #fff; border-bottom: 1px solid #E7EBDF; }
.marque { display: flex; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.marque-plot { width: 30px; height: 33px; flex: none; }
.marque-nom { width: 104px; height: 35px; overflow: visible; }
.marque-nom text, .heros-nom text, .pied-nom text { font-family: var(--titres); font-style: italic; font-weight: 800; paint-order: stroke; stroke-linejoin: round; }
.marque-ae { font-size: 22px; fill: var(--orange); stroke: var(--encre); stroke-width: 3px; }
.marque-b { font-size: 44px; fill: var(--vert); stroke: var(--encre); stroke-width: 5px; }
.apercu { font: 700 12px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px 5px; border-radius: 999px; border: 1.5px solid #C9D0BE; color: var(--gris); }
.entete-appel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 10px; background: var(--route); color: #fff; font: 700 16px/1 var(--texte); text-decoration: none; white-space: nowrap; }
.entete-appel svg { width: 18px; height: 18px; color: var(--vert); }
.entete-appel .long { display: none; }
@media (min-width: 420px) { .entete-appel .court { display: none; } .entete-appel .long { display: inline; } }
@media (min-width: 761px) { .entete { position: sticky; top: 0; } .marque-plot { width: 36px; height: 40px; } .marque-nom { width: 128px; height: 43px; } }

/* — haut de page — */
/* Sur téléphone, la scène prend la place qui reste une fois réservés l'en-tête, la barre d'appel, le titre (4 lignes)
   et le bouton : le titre entier et le bouton d'appel tiennent au-dessus de la barre, même sur un petit écran.
   Sur un écran bas, la scène perd d'abord un peu de ciel (rognée par le haut), jamais le nom ni les plots. */
.heros { position: relative; background: #fff; --t: clamp(24px, min(7.9vw, 4.1svh), 34px); }
.heros-scene { position: relative; overflow: hidden; height: max(240px, min(calc(100vw * 7 / 6), calc(100svh - var(--entete) - var(--barre-h, 0px) - var(--t) * 4.24 - 116px))); }
.route { width: 100%; height: 100%; }
.heros-nom { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.heros-nom .nom-ae text { font-size: 60px; fill: var(--orange); stroke: var(--encre); stroke-width: 6px; }
.heros-nom .nom-plein { font-size: 158px; fill: url(#vert-lettres); stroke: var(--encre); stroke-width: 7px; }
.heros-nom .nom-ombre { font-size: 158px; fill: #1F3A12; stroke: #1F3A12; stroke-width: 7px; }
.heros-pastilles { position: absolute; top: 12px; left: var(--gout); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pastille { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 2px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #DCE4CF; font: 500 16px/1.2 var(--texte); color: var(--encre); box-shadow: 0 4px 14px -8px rgba(20,21,21,.35); }
.pastille svg { width: 16px; height: 16px; color: #F2A81B; margin-top: -2px; }
.pastille b { font-weight: 800; }
.pastille-etat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #9AA092; flex: none; margin-top: -2px; }
.pastille-etat.ouvert::before { background: #3FAE2A; box-shadow: 0 0 0 4px rgba(63,174,42,.2); }
.heros-texte { display: flex; flex-direction: column; padding: 18px var(--gout) 36px; }
.heros-texte .surtitre { display: none; }
.heros h1 { font-size: var(--t); order: 1; }
.heros-actions { order: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.heros-actions .bouton { flex: 1 1 auto; }
.heros-sous { order: 3; margin-top: 18px; font-size: 18px; color: var(--gris); max-width: 34em; }
@media (max-width: 760px) and (max-height: 799px) {
  .heros-pastilles { position: static; order: 4; flex-direction: row; flex-wrap: wrap; margin-top: 18px; }
}
.js .route-tirets, .js .route-plots, .js .heros-nom g { opacity: 0; animation: secours-opaque 0s linear 2.6s forwards; }
.js .heros.roule .route-tirets, .js .heros.roule .route-plots { opacity: 1; animation: none; }
@keyframes secours-opaque { to { opacity: 1; } }

@media (min-width: 761px) {
  .heros { --hh: min(calc(100svh - var(--entete)), 880px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: calc(100svh - var(--entete)); overflow: hidden; }
  /* largeur bornée : la scène ne dépasse jamais du bord droit, et le nom (calé sur sa largeur) reste entier */
  .heros-scene { grid-column: 2; grid-row: 1; height: var(--hh); width: min(52vw, calc(var(--hh) * 0.95)); }
  .route { height: 100%; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
  .heros-texte { grid-column: 1; grid-row: 1; padding: 40px 0 40px max(var(--gout), calc((100vw - 1240px) / 2)); max-width: 680px; }
  .heros-texte .surtitre { display: inline-flex; order: 0; }
  .heros h1 { font-size: clamp(40px, 4.4vw, 64px); }
  .heros-sous { order: 2; font-size: 20px; margin-top: 22px; }
  .heros-actions { order: 3; margin-top: 30px; }
  .heros-actions .bouton { flex: 0 0 auto; }
  .heros-pastilles { left: auto; right: 24px; top: 20px; align-items: flex-end; }
}

/* — le code (vert du logo) — */
.code { position: relative; overflow: clip; padding: 64px 0 0; color: var(--encre);
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 14px, transparent 14px 46px), linear-gradient(180deg, #B6DB3E 0%, #9BCB2E 55%, #84BC27 100%); }
.code-mot { position: absolute; right: -0.06em; top: 10px; font: italic 800 clamp(150px, 46vw, 420px)/0.8 var(--titres); color: rgba(20, 21, 21, .07); pointer-events: none; user-select: none; }
.code-grille { position: relative; display: grid; gap: 34px; }
.code h2 { font-size: clamp(28px, 7.4vw, 50px); margin-bottom: 18px; }
.code-texte > p:not(.etiquette) { font-size: 18px; max-width: 30em; margin-bottom: 20px; }
.code .etiquette { color: var(--encre); }
.citation p { font: 700 21px/1.32 var(--titres); }
.citation footer { margin-top: 10px; font: 600 16px/1.3 var(--texte); letter-spacing: .02em; opacity: .8; }
.code-avis { display: grid; gap: 26px; }
.code-avis .citation { padding: 22px 22px 20px; background: rgba(255,255,255,.88); border-radius: 18px 18px 18px 4px; box-shadow: 0 18px 30px -24px rgba(20,40,10,.6); }
.code-avis .citation-decalee { background: var(--route); color: #fff; border-radius: 18px 18px 4px 18px; margin-left: 8%; }
.code-avis .citation-decalee footer { color: var(--vert); opacity: 1; }
.panneaux { position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 250px; margin-top: 30px; padding: 0 var(--gout); }
.panneaux::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, #6FAE22, #5A951A); }
.panneau { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.panneau-tete { width: var(--taille); height: var(--taille); filter: drop-shadow(0 6px 6px rgba(20,40,10,.25)); transform-origin: 50% 100%; }
.panneau-mat { width: 7px; height: calc(var(--mat) + 18px); margin-top: -4px; background: linear-gradient(90deg, #C9CDC4, #8E948A 60%, #6E746A); border-radius: 2px 2px 0 0; }
.panneau-ordi { display: none; }
@media (min-width: 761px) {
  .code { padding-top: 110px; }
  .code-grille { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
  .code-avis { padding-top: 40px; }
  .citation p { font-size: 24px; }
  .panneaux { height: 300px; justify-content: space-evenly; margin-top: 10px; }
  .panneau-ordi { display: flex; }
  .panneau-tete { width: calc(var(--taille) * 1.35); height: calc(var(--taille) * 1.35); }
  .panneau-mat { height: calc(var(--mat) * 1.3 + 18px); width: 9px; }
}

/* — la conduite (asphalte, rue vue du ciel) — */
.conduite { position: relative; padding: 64px 0 56px; color: #fff; background: var(--grain), radial-gradient(120% 60% at 80% 0%, #2E3033 0%, transparent 70%), var(--route); background-size: 180px 180px, auto, auto; }
.etiquette-claire { color: var(--vert); }
.conduite h2 { font-size: clamp(28px, 7.4vw, 50px); }
.conduite-haut { display: grid; gap: 28px; }
.citation-claire p { color: #fff; font-size: 20px; }
.citation-claire { border-left: 4px solid var(--vert); padding-left: 18px; }
.citation-claire footer { color: var(--vert); opacity: 1; }
.rue-cadre { margin: 34px 0 26px; }
.rue { width: 100%; height: auto; }
.rue-ordi { display: none; }
@media (min-width: 761px) { .rue-ordi { display: block; } .rue-tel { display: none; } }
.voiture-ecole .feux-frein, .voiture-ecole .feux-recul, .voiture-ecole .clignotant { opacity: 0; transition: opacity .2s ease; }
.voiture-ecole.frein .feux-frein, .voiture-ecole.recul .feux-recul { opacity: 1; }
.voiture-ecole.clign .clignotant { animation: clignote .7s steps(1, end) infinite; }
@keyframes clignote { 0% { opacity: 1; } 50% { opacity: 0; } }
.etapes-titre { font: italic 800 16px/1.2 var(--titres); letter-spacing: .06em; text-transform: uppercase; color: var(--vert); margin-bottom: 14px; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: e; }
.etapes li { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 14px; font-size: 18px; line-height: 1.35; transition: background-color .35s ease, color .35s ease; }
.etape-num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; transform: skewX(-9deg); background: #34373B; font: italic 800 22px/1 var(--titres); color: #fff; transition: background-color .35s ease, color .35s ease; }
.js .etapes.suivi li { color: #A3A89C; }
.js .etapes.suivi li.active, .js .etapes.suivi li.faite { color: #fff; }
.js .etapes.suivi li.active { background: rgba(155, 203, 46, .12); }
.js .etapes.suivi li.active .etape-num, .js .etapes.suivi li.faite .etape-num { background: var(--vert); color: var(--encre); }
@media (min-width: 761px) {
  .conduite { padding: 110px 0 90px; }
  .conduite-haut { grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: end; }
  .rue-cadre { margin: 56px 0 36px; }
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .etapes li { align-items: flex-start; padding: 18px; }
}

/* — les avis : sur le béton clair d'une piste, un passage piéton effacé, la note dans les lettres du logo, l'avis de Fabienne en très grand, celui de Kenza sur un panneau, puis les autres qui roulent sur la route, au doigt — */
.avis { position: relative; overflow: clip; padding: 70px 0 64px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .11 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    linear-gradient(90deg, rgba(20,21,20,.07) 0 2px, transparent 2px) -1px 0 / 280px 280px, linear-gradient(rgba(20,21,20,.07) 0 2px, transparent 2px) 0 -1px / 280px 280px,
    radial-gradient(70% 40% at 100% 0%, rgba(155,203,46,.24), transparent 70%), radial-gradient(60% 35% at 0% 100%, rgba(242,106,27,.13), transparent 70%), #EEEFE6; }
.avis-scene { position: relative; display: grid; gap: 34px; }
.avis h2 { font-size: clamp(28px, 7.4vw, 52px); }
.avis-pastille { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 20px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--route); color: #fff; font: 600 16px/1.3 var(--texte); }
.avis-pastille b { font: italic 800 20px/1 var(--titres); color: var(--vert); }
.avis-pastille .puce-plot { margin: 0; font-size: 18px; }
.avis-note { display: flex; align-items: center; gap: 16px; }
.avis-chiffre { width: clamp(150px, 42vw, 250px); height: auto; overflow: visible; filter: drop-shadow(6px 6px 0 var(--orange)); }
.avis-chiffre text { font: italic 800 168px/1 var(--titres); fill: var(--vert); stroke: var(--encre); stroke-width: 9px; paint-order: stroke; stroke-linejoin: round; letter-spacing: -2px; }
.avis-detail { display: grid; gap: 6px; font-size: 16px; line-height: 1.35; color: var(--gris); max-width: 15em; }
.etoiles { display: flex; gap: 3px; color: #F2A81B; }
.etoiles svg { width: 20px; height: 20px; }

/* l'avis de Fabienne, en très grand */
.avis-grand p { font: 700 clamp(27px, 7.4vw, 50px)/1.1 var(--titres); letter-spacing: -0.012em; }
.avis-grand footer { display: flex; align-items: center; gap: 4px; margin-top: 16px; font: 600 16px/1.3 var(--texte); color: var(--gris); }
.avis-grand footer .puce-plot { font-size: 22px; }

/* l'avis de Kenza, sur un panneau de direction */
.panneau-avis { justify-self: start; display: grid; justify-items: center; width: min(100%, 440px); margin: 0; }
.panneau-avis-plaque { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 20px 20px 24px; border-radius: 14px; background: #1E6A33; color: #fff; box-shadow: inset 0 0 0 4px #1E6A33, inset 0 0 0 7px #fff, 0 22px 30px -20px rgba(20, 40, 10, .7); rotate: -1.5deg; }
.panneau-avis-plaque p { font: 700 clamp(22px, 6vw, 28px)/1.18 var(--titres); }
.panneau-avis-plaque b { color: var(--vert); }
.panneau-avis-fleche { flex: none; width: 40px; height: 40px; color: #fff; }
.panneau-avis figcaption { position: relative; z-index: 1; margin-top: -2px; padding: 6px 16px 5px; border-radius: 0 0 10px 10px; background: #fff; border: 3px solid #1E6A33; border-top: 0; font: 700 15px/1.2 var(--texte); color: #1E6A33; rotate: -1.5deg; }
.panneau-avis-mats { display: flex; gap: 46%; justify-content: center; width: 100%; margin-top: -4px; }
.panneau-avis-mats span { width: 8px; height: 46px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #C9CDC4, #8E948A 60%, #6E746A); }

/* les autres avis roulent sur la route : elle défile avec eux, au doigt */
.route-avis { margin-top: 46px; }
.route-avis-piste { --bord: max(var(--gout), (100% - 1240px) / 2); display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 34px var(--bord); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-width: none;
  background: repeating-linear-gradient(90deg, #fff 0 36px, transparent 36px 64px) 0 50% / 100% 5px no-repeat, linear-gradient(180deg, transparent 18%, #5E6158 18% 19.5%, var(--route) 19.5% 80.5%, #5E6158 80.5% 82%, transparent 82%);
  background-attachment: local; }
.route-avis-piste::-webkit-scrollbar { display: none; }
.route-avis-piste:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.ra-carte { flex: none; display: flex; flex-direction: column; gap: 14px; width: min(76vw, 300px); padding: 22px 22px 18px; border-radius: 16px; background: #fff; scroll-snap-align: start; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .55); }
.ra-large { width: min(84vw, 420px); }
.ra-carte p { font-size: 17px; line-height: 1.5; }
.ra-carte .ra-nom { margin-top: auto; font: 600 15px/1.3 var(--texte); color: var(--gris); }
.ra-vert { background: var(--vert); }
.ra-vert .surligne { background-image: linear-gradient(transparent 58%, #fff 58% 92%, transparent 92%); }
.ra-vert .ra-nom { color: var(--vert-nuit); }
.ra-orange { background: #FFE3CF; }
.route-avis-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.ra-tirets { display: flex; gap: 8px; }
.ra-tirets span { width: 30px; height: 6px; border-radius: 1px; background: #C7CABF; transition: background-color .3s ease, width .3s ease; }
.ra-tirets span.actif { width: 44px; background: var(--orange); }
.ra-fleches { display: none; gap: 12px; }
.ra-fleche { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 12px; background: var(--route); color: #fff; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.ra-fleche svg { width: 22px; height: 22px; }
.ra-fleche:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .ra-fleche:not(:disabled):hover { transform: translateY(-2px); } }

.surligne { background: linear-gradient(transparent 58%, var(--vert) 58% 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding: 0 .08em; margin: 0 -.08em; }
.js .surligne { background-size: 0% 100%; transition: background-size .9s cubic-bezier(.6,0,.2,1) .25s; }
.js .surligne.vu, .js [data-titre-decoupe] .surligne { background-size: 100% 100%; }
@media (min-width: 761px) {
  .avis { padding: 120px 0 110px; }
  .avis-scene { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "tete note" "grand panneau"; gap: 60px 70px; align-items: center; }
  .avis-tete { grid-area: tete; } .avis-note { grid-area: note; justify-self: end; } .avis-grand { grid-area: grand; } .panneau-avis { grid-area: panneau; justify-self: end; }
  .avis-chiffre { width: 270px; }
  .route-avis { margin-top: 70px; }
  .route-avis-piste { padding-block: 44px; }
  .ra-carte { width: 330px; padding: 26px 26px 20px; } .ra-large { width: 460px; }
  .ra-carte p { font-size: 18px; }
  .ra-fleches { display: flex; }
}

/* — écrire (orange des plots) — */
.ecrire { position: relative; overflow: clip; padding: 66px 0 70px; color: var(--encre);
  background: linear-gradient(118deg, transparent 0 62%, rgba(255,255,255,.13) 62% 70%, transparent 70% 76%, rgba(255,255,255,.13) 76% 82%, transparent 82%), linear-gradient(180deg, #F47A2C, var(--orange) 60%, #EA6115); }
.etiquette-noire { color: var(--encre); }
.ecrire h2 { font-size: clamp(28px, 7.4vw, 50px); margin-bottom: 22px; }
.ecrire-grille { display: grid; gap: 36px; }
.numero { display: block; margin-bottom: 18px; font: italic 800 clamp(40px, 11.6vw, 76px)/1 var(--titres); color: var(--encre); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.numero:hover { color: #fff; }
.sms { background: #fff; border-radius: 22px; padding: 22px 18px 20px; box-shadow: 0 30px 50px -30px rgba(80,25,0,.6); }
.sms-titre { font: italic 800 22px/1.1 var(--titres); margin-bottom: 14px; }
.sms-bulle { position: relative; margin: 6px 0 18px; padding: 16px 16px 14px; background: #EEF1E7; border-radius: 18px 18px 18px 4px; font-size: 17px; line-height: 1.5; }
.sms-ouvrir { width: 100%; }
@media (min-width: 761px) {
  .ecrire { padding: 120px 0; }
  .ecrire-grille { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
  .sms { padding: 32px 30px 28px; }
}

/* — venir (vert profond) — */
.venir { position: relative; padding: 70px 0 64px; color: #fff; background: radial-gradient(90% 60% at 0% 0%, rgba(155,203,46,.2), transparent 70%), linear-gradient(180deg, #24451A, var(--vert-nuit)); }
.venir h2 { font-size: clamp(28px, 7.4vw, 50px); margin: 26px 0 24px; }
.venir-grille { display: grid; gap: 44px; }
.venir-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.venir-actions .bouton { flex: 1 1 auto; }
.panneau-ville { display: inline-flex; padding: 5px; background: #fff; border-radius: 12px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); transform: rotate(-2deg); }
.panneau-ville span { display: block; padding: 12px 20px 8px; border: 6px solid #D6252F; border-radius: 8px; font: 800 30px/1 var(--texte); letter-spacing: .02em; text-transform: uppercase; color: var(--encre); white-space: nowrap; }
.horaires { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 22px 18px 14px; }
.horaires-titre { font: italic 800 22px/1.1 var(--titres); color: var(--vert); margin-bottom: 12px; }
.pastille-sombre { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; margin-bottom: 12px; box-shadow: none; }
.horaires table { width: 100%; border-collapse: collapse; font-size: 17px; }
.horaires th { text-align: left; font-weight: 600; padding: 11px 8px 9px; white-space: nowrap; vertical-align: top; }
.horaires td { text-align: right; padding: 11px 8px 9px; color: #E6EDDB; }
.horaires tr + tr th, .horaires tr + tr td { border-top: 1px solid rgba(255,255,255,.12); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { background: var(--vert); color: var(--encre); border-top-color: transparent; }
.horaires tr.aujourdhui th { border-radius: 8px 0 0 8px; }
.horaires tr.aujourdhui td { border-radius: 0 8px 8px 0; font-weight: 700; }
@media (min-width: 761px) {
  .venir { padding: 120px 0 110px; }
  .venir-grille { grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; }
  .venir-actions .bouton { flex: 0 0 auto; }
  .panneau-ville span { font-size: 40px; }
  .horaires { padding: 30px 30px 20px; }
}

/* — pied — */
.pied { position: relative; padding: 46px 0 40px; background: var(--grain), var(--route); background-size: 180px 180px, auto; color: #D9DDD2; }
.pied::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 46px, transparent 46px 80px); opacity: .85; }
.pied-nom { width: min(100% - 2 * var(--gout), 1240px); height: auto; margin: 0 auto 30px; overflow: visible; }
.pied-nom .nom-ae text { font-size: 84px; fill: var(--orange); }
.pied-nom .nom-plein { font-size: 250px; fill: var(--vert); }
.pied-infos { display: grid; gap: 12px; font-size: 16px; line-height: 1.5; }
.pied-infos a { color: #fff; }
.pied-mention { color: #A9AEA2; }
@media (min-width: 761px) { .pied { padding: 70px 0 50px; } }

/* barre d'appel collante (procédé) */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: #fff; border-top: 1px solid #DDE3D2; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.35); transition: transform .25s ease, visibility .25s; }
  .barre-appel a { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 12px; border: 2px solid var(--route); border-radius: 10px;
    background: var(--route); color: #fff; font: 700 17px/1.1 var(--texte); text-decoration: none; }
  .barre-appel a:not(:first-child) { background: transparent; color: var(--encre); }
  .barre-appel a:first-child svg { color: var(--vert); }
  .barre-appel svg { width: 1.2em; height: 1.2em; flex: none; }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* apparitions : cachées seulement si le script tourne, visibles après 3 s quoi qu'il arrive */
.js .apparait { opacity: 0; transform: translateY(26px); animation: secours-apparait 0s linear 3s forwards; }
.js .apparait.vu { opacity: 1; transform: none; animation: none; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
@keyframes secours-apparait { to { opacity: 1; transform: none; } }
.js.anim .apparait:not(.vu) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .js [data-titre-decoupe]:not(.pret) { visibility: visible; }
  .js .apparait, .js .route-tirets, .js .route-plots, .js .heros-nom g { opacity: 1; transform: none; }
  .js .surligne { background-size: 100% 100%; }
  .voiture-ecole.clign .clignotant { animation: none; }
}