/* ==========================================================================
   Beyond Borders — feuille de styles partagée
   Socle commun aux 9 pages du site. Chemins absolus uniquement.
   ========================================================================== */

:root{
  --navy:#2c4670;
  --navy-dark:#1e3050;
  --ciel:#dff0fa;
  --tangerine:#ff6b1a;
  --creme:#fefcf7;
  --blanc:#ffffff;
  --gris:#6b7280;
  --trait:#e2e0da;
  --navy-8:rgba(44,70,112,.08);
  --header-h:100px;
  --gouttiere:32px;
  --max:1180px;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--creme);
  color:var(--navy);
  font-family:Comfortaa,"Trebuchet MS",system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  padding-top:var(--header-h);
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;letter-spacing:-.4px}
p{margin:0}
img{max-width:100%;height:auto;display:block}

a{color:var(--tangerine);text-decoration:none}
a:hover{color:var(--navy)}

/* Focus clavier — visible partout, jamais supprimé */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--tangerine);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gouttiere);
}

.section{padding:72px 0}
.section--navy{background:var(--navy);color:var(--creme)}
.section--blanc{background:var(--blanc)}

.eyebrow{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--tangerine);margin-bottom:14px;
}

/* --------------------------------------------------------------------------
   HEADER — socle réutilisable
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:var(--creme);
  border-bottom:1px solid var(--trait);
}
.site-header__inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header__logo{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:5px;flex:0 0 auto;
}
.site-header__logo img{height:60px;width:auto;flex-shrink:0;max-width:none}
.site-header__claim{
  display:block;
  color:var(--tangerine);
  font-size:11.5px;font-style:italic;font-weight:600;letter-spacing:.2px;
  line-height:1.2;white-space:nowrap;
}

.nav{
  display:none;
  position:absolute;top:var(--header-h);right:var(--gouttiere);
  flex-direction:column;align-items:stretch;gap:0;
  width:min(300px,calc(100vw - 2 * var(--gouttiere)));
  background:var(--creme);
  border:1px solid var(--trait);
  border-radius:var(--radius);
  box-shadow:0 18px 34px rgba(44,70,112,.14);
  padding:10px 20px 20px;
}
.nav.is-open{display:flex}
.nav a{
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  padding:13px 0;
  border-bottom:1px solid var(--trait);
}
.nav a:hover{color:var(--tangerine)}
.nav a[aria-current="page"]{color:var(--tangerine)}
.nav .nav__cta{
  margin-top:16px;text-align:center;border-bottom:0;
  background:var(--tangerine);
  color:var(--navy-dark);
  border-radius:var(--radius);
  padding:15px 20px;
  line-height:1;
}
.nav .nav__cta:hover{background:#ff7d36;color:var(--navy-dark)}

.burger{
  display:block;
  background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;
  color:var(--navy);
}
.burger span{
  display:block;width:24px;height:2px;background:currentColor;border-radius:2px;
}
.burger span + span{margin-top:6px}

/* --------------------------------------------------------------------------
   BLOC 1 — Hero (logo en évidence, centré)
   -------------------------------------------------------------------------- */
.hero{padding:44px var(--gouttiere) 76px;text-align:center}
.hero__mark{
  display:block;
  width:auto;
  height:clamp(112px,15vw,176px);
  margin:0 auto 30px;
}
.hero__kicker{
  display:block;margin:0 auto 22px;
  white-space:nowrap;
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--gris);
}

.hero__titre{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:840px;margin:0 auto;
}
.hero__label{
  white-space:nowrap;
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--tangerine);
}
.hero__specialites{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;width:100%;margin-top:8px;
}
.specialite{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:clamp(15px,1.35vw,18px);font-weight:700;letter-spacing:-.2px;
  color:var(--navy);
}
.specialite img{height:58px;width:auto;opacity:.9}
.hero__claim{
  margin-top:18px;
  color:var(--tangerine);
  font-size:15px;
  font-style:italic;
  font-weight:600;
  letter-spacing:.2px;
}

/* --------------------------------------------------------------------------
   BLOC 2 — Bande chiffres
   -------------------------------------------------------------------------- */
.chiffres{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait);
  margin-bottom:48px;
}
.chiffre{padding:26px 34px}
.chiffre + .chiffre{border-left:1px solid var(--trait)}
.chiffre:first-child{padding-left:0}
.chiffre__pre{
  display:block;margin-bottom:2px;
  font-size:12px;font-weight:600;letter-spacing:.6px;
  color:var(--gris);
}
.chiffre__n{
  display:block;
  font-size:clamp(44px,5.6vw,72px);
  font-weight:700;
  line-height:1;
  letter-spacing:-2px;
  color:var(--tangerine);
}
.chiffre__l{
  display:block;margin-top:10px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--gris);
}

/* --------------------------------------------------------------------------
   BLOC 3 — Cartes segment
   -------------------------------------------------------------------------- */
.segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.segment{
  display:flex;flex-direction:column;
  background:var(--navy);
  color:var(--creme);
  border-radius:var(--radius);
  padding:38px 36px 32px;
  min-height:300px;
  transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.segment:hover,.segment:focus-visible{
  background:var(--ciel);
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(44,70,112,.22);
  color:var(--navy);
}
.segment:hover .segment__link,.segment:focus-visible .segment__link{color:var(--navy)}
.segment h2{
  font-size:12.5px;font-weight:700;margin-bottom:20px;
  white-space:nowrap;text-transform:uppercase;letter-spacing:0;
}
@media (min-width:981px) and (max-width:1150px){
  .segment h2{font-size:12px}
}
@media (max-width:620px){
  .segment h2{font-size:11.5px}
}
.segment ul{list-style:none;margin:0;padding:0}
.segment li{
  font-size:15.5px;line-height:1.5;padding-left:20px;position:relative;
}
.segment li + li{margin-top:10px}
.segment li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--tangerine);
}
.segment__link{
  margin-top:auto;padding-top:28px;
  color:var(--tangerine);font-weight:600;font-size:15px;
}
.segment:hover .segment__link{color:var(--tangerine)}

/* --------------------------------------------------------------------------
   BLOC 5 — Ce dont vous n'avez pas à vous occuper
   -------------------------------------------------------------------------- */
.charge__panneau{display:block}
.charge__intro{
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:0;
  border-bottom:1px solid var(--trait);
}
.charge__intro h2{font-size:clamp(24px,2.6vw,34px);font-weight:700;color:var(--navy)}
.charge__intro p{font-size:15px;color:var(--gris)}
.charge__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--trait);
}
.charge__item{padding:28px 30px 30px}
.charge__item + .charge__item{border-left:1px solid var(--trait)}
.charge__item:first-child{padding-left:0}
.charge__item:last-child{padding-right:0}
.charge__item h3{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;
}
.charge__item h3::before{content:"";width:9px;height:9px;background:var(--tangerine);flex:0 0 auto}
.charge__item p{font-size:14.5px;line-height:1.65;color:var(--gris)}

/* --------------------------------------------------------------------------
   BLOC 6 — Destinations
   -------------------------------------------------------------------------- */
.dest-card{
  position:relative;
  display:flex;align-items:flex-end;
  aspect-ratio:1;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
/* Fond crème, trait navy, croquis au trait */
.dest-card{background:var(--creme);color:var(--navy);box-shadow:inset 0 0 0 1px var(--trait)}
.dest-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(254,252,247,.96) 0%,rgba(254,252,247,.5) 34%,transparent 58%);
}
.dest-card__motif{position:absolute;inset:0;z-index:0}

/* Croquis, un fichier par destination */
.dest-card--malte .dest-card__motif{background:url("/assets/destinations/malte.svg") 50% 10%/auto 84% no-repeat}
.dest-card--dublin .dest-card__motif{background:url("/assets/destinations/dublin.svg") 50% 16%/auto 76% no-repeat}
.dest-card--londres .dest-card__motif{background:url("/assets/destinations/londres.svg") 50% 10%/auto 84% no-repeat}
.dest-card--madrid .dest-card__motif{background:url("/assets/destinations/madrid.svg") 50% 14%/auto 78% no-repeat}
.dest-card--barcelone .dest-card__motif{background:url("/assets/destinations/barcelone.svg") 50% 10%/auto 84% no-repeat}
.dest-card--newyork .dest-card__motif{background:url("/assets/destinations/newyork.svg") 50% 10%/auto 84% no-repeat}
.dest-card--york .dest-card__motif{background:url("/assets/destinations/york.svg") 50% 12%/auto 82% no-repeat}
.dest-card--brighton .dest-card__motif{background:url("/assets/destinations/brighton.svg") 50% 12%/auto 82% no-repeat}
.dest-card--cambridge .dest-card__motif{background:url("/assets/destinations/cambridge.svg") 50% 12%/auto 82% no-repeat}
.dest-card--manchester .dest-card__motif{background:url("/assets/destinations/manchester.svg") 50% 12%/auto 82% no-repeat}
.dest-card--boston .dest-card__motif{background:url("/assets/destinations/boston.svg") 50% 12%/auto 82% no-repeat}
.dest-card--sanfrancisco .dest-card__motif{background:url("/assets/destinations/sanfrancisco.svg") 50% 12%/auto 82% no-repeat}
.dest-card--losangeles .dest-card__motif{background:url("/assets/destinations/losangeles.svg") 50% 12%/auto 82% no-repeat}
.dest-card--toronto .dest-card__motif{background:url("/assets/destinations/toronto.svg") 50% 12%/auto 82% no-repeat}
.dest-card--valencia .dest-card__motif{background:url("/assets/destinations/valencia.svg") 50% 12%/auto 82% no-repeat}
.dest-card--seville .dest-card__motif{background:url("/assets/destinations/seville.svg") 50% 12%/auto 82% no-repeat}
.dest-card--malaga .dest-card__motif{background:url("/assets/destinations/malaga.svg") 50% 12%/auto 82% no-repeat}
.dest-card--grenade .dest-card__motif{background:url("/assets/destinations/grenade.svg") 50% 12%/auto 82% no-repeat}
.dest-card--berlin .dest-card__motif{background:url("/assets/destinations/berlin.svg") 50% 12%/auto 82% no-repeat}
.dest-card--munich .dest-card__motif{background:url("/assets/destinations/munich.svg") 50% 12%/auto 82% no-repeat}
.dest-card--francfort .dest-card__motif{background:url("/assets/destinations/francfort.svg") 50% 12%/auto 82% no-repeat}
.dest-card--hambourg .dest-card__motif{background:url("/assets/destinations/hambourg.svg") 50% 12%/auto 82% no-repeat}
.dest-card--rome .dest-card__motif{background:url("/assets/destinations/rome.svg") 50% 12%/auto 82% no-repeat}
.dest-card--florence .dest-card__motif{background:url("/assets/destinations/florence.svg") 50% 12%/auto 82% no-repeat}
.dest-card--verone .dest-card__motif{background:url("/assets/destinations/verone.svg") 50% 12%/auto 82% no-repeat}
.dest-card--alicante .dest-card__motif{background:url("/assets/destinations/alicante.svg") 50% 12%/auto 82% no-repeat}

.dest-card__name{
  position:relative;z-index:2;
  padding:0 26px 24px;
  font-size:19px;font-weight:700;letter-spacing:-.3px;
}
.dest-card__meta{
  display:block;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--gris);
  margin-top:4px;
}
.dest-card__name{color:var(--tangerine)}

/* --------------------------------------------------------------------------
   Séjours linguistiques — index de langues, déroulé au survol
   -------------------------------------------------------------------------- */
.langues{padding:40px 0}
.langues > .container{
  max-width:920px;
  background:var(--navy);color:var(--creme);
  border-radius:24px;
  padding:56px 52px 40px;
}
.langues h2{font-size:clamp(26px,3vw,40px);font-weight:700;margin-bottom:12px}
.langues__intro{font-size:15.5px;color:rgba(254,252,247,.62);max-width:60ch;margin-bottom:44px}
.langues__liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(254,252,247,.22)}

.langue{
  position:relative;
  display:grid;grid-template-columns:minmax(190px,240px) 1fr;
  align-items:center;gap:32px;
  padding:20px 0;
  border-bottom:1px solid rgba(254,252,247,.22);
  transition:padding-left .25s ease;
}
.langue.is-open{padding-left:18px}
.langue::before{
  content:"";position:absolute;left:0;top:50%;
  width:9px;height:9px;margin-top:-4px;background:var(--tangerine);
  opacity:0;transition:opacity .25s ease;
}
.langue.is-open::before{opacity:1}
.langue__nom{
  justify-self:start;
  appearance:none;background:none;border:0;padding:0;margin:0;
  font-family:inherit;text-align:left;
  font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.6px;
  color:var(--creme);cursor:pointer;
  transition:color .2s ease;
}
.langue__nom:hover{color:var(--tangerine)}
.langue.is-open .langue__nom{color:var(--tangerine)}

.langue__panneau{
  display:none;
  flex-wrap:wrap;gap:6px 34px;
}
.langue.is-open .langue__panneau{display:flex}
.langue__note{
  flex:1 0 100%;margin-top:10px;
  font-size:13px;
}
.langue__note a{color:var(--tangerine);border-bottom:1px solid rgba(255,107,26,.4)}
.langue__note a:hover{color:var(--creme);border-bottom-color:var(--creme)}
.langue__pays{display:contents;list-style:none;margin:0;padding:0}
.langue__pays > li{display:flex;flex-direction:column;gap:4px}
.langue__pays b{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--tangerine);
}
.villes{display:flex;flex-wrap:wrap;gap:2px 14px}
.ville{
  position:relative;
  color:var(--creme);font-size:14px;font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.ville:hover,.ville:focus-visible{color:var(--creme);border-bottom-color:var(--tangerine)}

/* fiche croquis sous la ville survolée */
.ville .dest-card{
  position:absolute;z-index:30;top:calc(100% + 12px);left:-14px;
  width:200px;height:200px;
  background:var(--blanc);
  box-shadow:0 18px 34px rgba(8,16,32,.4);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s;
}
.ville .dest-card::before{
  background:linear-gradient(to top,rgba(255,255,255,.96) 0%,rgba(255,255,255,.5) 30%,transparent 52%);
}
.ville:hover .dest-card,.ville:focus-visible .dest-card{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   BLOC 8 — Verbatims
   -------------------------------------------------------------------------- */
.verbatims{position:relative;overflow:hidden}
.verbatims::before{
  content:"";position:absolute;z-index:0;
  right:-90px;top:-60px;width:420px;aspect-ratio:1;border-radius:50%;
  background:rgba(255,107,26,.1);
}
.verbatims__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
}
.verbatims{padding-top:0}
.verbatims::before{width:300px;right:-70px;top:-30px}
.verbatims__grid{max-width:900px;margin:0 auto;gap:40px}
.verbatim p{
  font-size:clamp(15px,1.35vw,17px);
  font-weight:600;line-height:1.55;letter-spacing:-.1px;
}
.verbatim cite{
  display:block;margin-top:10px;
  font-style:normal;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.4px;color:var(--gris);
}

/* --------------------------------------------------------------------------
   BLOC 9 — CTA final
   -------------------------------------------------------------------------- */
.cta{
  max-width:660px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--creme);
  border:2px solid var(--tangerine);
  border-radius:14px;
  padding:44px 48px 40px;
}
.cta h2{font-size:clamp(21px,2.3vw,28px);font-weight:700;margin-bottom:12px;max-width:26ch}
.cta p{font-size:15.5px;max-width:46ch;color:var(--gris)}
.cta .btn{margin-top:26px}
.btn{
  display:inline-block;
  background:var(--tangerine);color:var(--navy-dark);
  border-radius:var(--radius);
  padding:16px 28px;
  font-size:15.5px;font-weight:700;line-height:1;
  white-space:nowrap;
}
.btn:hover{background:#ff7d36;color:var(--navy-dark)}

/* Bouton de l'accueil aligné sur les trois autres pages : pastille navy.
   Règle ajoutée, portée limitée au bloc CTA — .btn reste inchangé. */
.cta .btn{
  border-radius:999px;padding:15px 30px;font-size:15px;
  background:var(--navy);color:var(--creme);
  box-shadow:0 6px 18px rgba(44,70,112,.18);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cta .btn:hover{
  background:var(--navy-dark);color:var(--creme);
  box-shadow:0 10px 24px rgba(44,70,112,.24);transform:translateY(-1px);
}

/* --------------------------------------------------------------------------
   FOOTER — socle réutilisable
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy);color:var(--creme);padding:64px 0 0}
.site-footer__grid{
  display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:40px;
  padding-bottom:48px;
}
.site-footer img{height:120px;width:auto}
.site-footer__claim{
  margin-top:18px;font-size:14px;font-style:italic;color:rgba(254,252,247,.72);
  max-width:24ch;
}
.site-footer h2{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--tangerine);margin-bottom:16px;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px;font-size:14.5px}
.site-footer a{color:var(--creme)}
.site-footer a:hover{color:var(--tangerine)}
.site-footer address{font-style:normal;font-size:14.5px;line-height:1.9}
.site-footer__legal-bar{
  border-top:1px solid rgba(254,252,247,.16);
  padding:20px 0 24px;
  font-size:12.5px;color:rgba(254,252,247,.62);
}

/* --------------------------------------------------------------------------
   Apparition douce au scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .segments{grid-template-columns:1fr}
  .charge__grid{grid-template-columns:1fr 1fr}
  .charge__item{padding:26px 24px}
  .charge__item:nth-child(3){border-left:0}
  .charge__item:nth-child(odd){padding-left:0}
  .charge__item:nth-child(even){padding-right:0}
  .charge__item:nth-child(n+3){border-top:1px solid var(--trait)}
  .dest__grid{grid-template-columns:1fr 1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:1150px){
  :root{--gouttiere:22px}
}

@media (max-width:860px){
  .verbatims__grid{grid-template-columns:1fr;gap:28px}
  .hero__specialites{grid-template-columns:1fr 1fr;gap:26px}
  .charge__grid{grid-template-columns:1fr}
  .charge__item{padding:24px 0;border-left:0!important}
  .charge__item + .charge__item{border-top:1px solid var(--trait)}
  .section{padding:56px 0}
}

@media (max-width:620px){
  .chiffres{grid-template-columns:1fr;margin-bottom:44px}
  .chiffre{
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;
    column-gap:14px;padding:18px 0;
  }
  .chiffre__pre{grid-column:1/3;margin-bottom:0}
  .chiffre + .chiffre{border-left:0;border-top:1px solid var(--trait)}
  .chiffre__pre{
  display:block;margin-bottom:2px;
  font-size:12px;font-weight:600;letter-spacing:.6px;
  color:var(--gris);
}
.chiffre__n{font-size:44px}
  .chiffre__l{margin-top:0}
  .dest__grid{grid-template-columns:1fr}
  .dest-card{aspect-ratio:16/9}
  .langues::before{display:none}
  .langues > .container{border-radius:16px;padding:40px 26px 28px}
  .langue{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .langue.is-open .langue__panneau{flex-direction:column;gap:14px}
  .ville .dest-card{display:none}
  .site-footer__grid{grid-template-columns:1fr;gap:32px}
  .cta{padding:34px 26px 30px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .dest-card__motif{transform:none}
  .reveal{opacity:1;transform:none}
  .segment:hover,.dest-card:hover{transform:none}
}


/* ==========================================================================
   ===== PAGE COLLÈGES ET LYCÉES =====
   Règles propres à /colleges-lycees/. N'affectent aucune page existante.
   ========================================================================== */

/* Lien texte récurrent de la page */
.cl-lien{font-size:15px;font-weight:700;color:var(--tangerine)}
.cl-lien:hover{color:var(--navy)}

/* Titres de section */
.cl-titre{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-1px}
.cl-titre--creme{color:var(--creme)}
.cl-titre--petit{font-size:clamp(22px,2.4vw,30px)}
.cl-chapo{font-size:15.5px;color:var(--gris);max-width:56ch}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cl-hero{padding:56px var(--gouttiere) 64px}
.cl-hero .eyebrow{margin-bottom:18px}
.cl-hero__titre{display:flex;flex-direction:column;gap:18px}
.cl-hero__seg{
  text-transform:uppercase;
  font-size:clamp(30px,5.4vw,66px);
  font-weight:700;line-height:1;letter-spacing:-1.6px;
  color:var(--navy);
}
.cl-hero__phrase{
  display:flex;flex-direction:column;
  font-size:clamp(21px,2.5vw,31px);
  font-weight:600;line-height:1.22;letter-spacing:-.6px;
}
.cl-hero__l2{color:var(--tangerine)}
.cl-hero__chapo{
  margin-top:30px;max-width:62ch;
  font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.7;color:var(--gris);
}
.cl-hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  margin-top:34px;
}
.cl-hero__actions .btn{
  border-radius:999px;
  padding:15px 30px;
  font-size:15px;
  background:var(--navy);color:var(--creme);
  box-shadow:0 6px 18px rgba(44,70,112,.18);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cl-hero__actions .btn:hover{
  background:var(--navy-dark);color:var(--creme);
  box-shadow:0 10px 24px rgba(44,70,112,.24);transform:translateY(-1px);
}

/* --------------------------------------------------------------------------
   Les trois offres
   -------------------------------------------------------------------------- */
.cl-offres{padding-top:8px}
.cl-offres__tete{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:26px;
}
.cl-offres__tete .eyebrow{margin-bottom:0;font-size:14px;letter-spacing:2.4px}
.cl-offres .cl-titre{font-size:clamp(28px,3.6vw,44px)}
.cl-offres__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:0;
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--trait);
}
.cl-offre{
  display:flex;flex-direction:column;
  padding:34px 34px 38px;
}
.cl-offre + .cl-offre{border-left:1px solid var(--trait)}
.cl-offre:first-child{padding-left:0}
.cl-offre:last-child{padding-right:0}
.cl-offre__num{
  font-size:13px;font-weight:700;letter-spacing:2px;color:var(--tangerine);
  margin-bottom:14px;
}
.cl-offre h3{font-size:19px;font-weight:700;margin-bottom:14px}
.cl-offre__texte{font-size:14.5px;line-height:1.7;color:var(--gris)}
.cl-puces{list-style:none;margin:20px 0 0;padding:0}
.cl-puces li{
  position:relative;padding-left:20px;
  font-size:14px;font-weight:600;line-height:1.5;
}
.cl-puces li + li{margin-top:8px}
.cl-puces li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--tangerine);
}
.cl-offre__lien{margin-top:auto;padding-top:24px}

/* --------------------------------------------------------------------------
   Pensé pour le cadre scolaire (bande navy)
   -------------------------------------------------------------------------- */
.cl-cadre__intro{max-width:66ch}
.cl-cadre__chapo{
  margin-top:16px;font-size:15.5px;line-height:1.7;
  color:rgba(254,252,247,.72);
}
.cl-cadre__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:48px;
  border-top:1px solid rgba(254,252,247,.22);
}
.cl-cadre__item{
  padding:30px 34px 34px;
  border-bottom:1px solid rgba(254,252,247,.22);
}
.cl-cadre__item:not(:nth-child(3n+1)){border-left:1px solid rgba(254,252,247,.22)}
.cl-cadre__item:nth-child(3n+1){padding-left:0}
.cl-cadre__item:nth-child(3n){padding-right:0}
.cl-cadre__item h3{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;color:var(--creme);margin-bottom:12px;
}
.cl-cadre__item h3::before{content:"";width:9px;height:9px;background:var(--tangerine);flex:0 0 auto}
.cl-cadre__item p{font-size:14.5px;line-height:1.7;color:rgba(254,252,247,.72)}

/* --------------------------------------------------------------------------
   Comment ça se passe — frise
   -------------------------------------------------------------------------- */
.cl-etapes__intro{display:flex;flex-direction:column;gap:12px}
.cl-etapes__frise{
  list-style:none;margin:46px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.cl-etape{
  position:relative;
  padding:34px 26px 0 0;
  border-top:2px solid var(--trait);
}
.cl-etape + .cl-etape{padding-left:26px}
.cl-etape__num{
  position:absolute;top:-19px;left:0;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:var(--tangerine);color:var(--navy-dark);
  font-size:16px;font-weight:700;line-height:1;
}
.cl-etape + .cl-etape .cl-etape__num{left:26px}
.cl-etape h3{font-size:17px;font-weight:700;margin-bottom:12px}
.cl-etape p{font-size:14.5px;line-height:1.7;color:var(--gris)}

/* --------------------------------------------------------------------------
   Ce qui vous protège
   -------------------------------------------------------------------------- */
.cl-etapes__cta{margin:48px 0 0}
.cl-etapes__cta .btn{
  border-radius:999px;padding:15px 30px;font-size:15px;
  background:var(--navy);color:var(--creme);
  box-shadow:0 6px 18px rgba(44,70,112,.18);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cl-etapes__cta .btn:hover{
  background:var(--navy-dark);color:var(--creme);
  box-shadow:0 10px 24px rgba(44,70,112,.24);transform:translateY(-1px);
}
.cl-garanties{padding-top:0}
.cl-garanties__liste{
  margin:30px 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 44px;
}
.cl-garantie{
  padding:22px 0;
  border-top:1px solid var(--trait);
}
.cl-garantie dt{font-size:15px;font-weight:700;margin-bottom:8px}
.cl-garantie dd{margin:0;font-size:14.5px;line-height:1.7;color:var(--gris)}

/* --------------------------------------------------------------------------
   Questions fréquentes — accordéon natif, ouverture au clic
   -------------------------------------------------------------------------- */
.cl-faq__liste{margin-top:32px;border-top:1px solid var(--trait)}
.cl-q{border-bottom:1px solid var(--trait)}
.cl-q > summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  list-style:none;cursor:pointer;
  padding:20px 0;
  font-size:16px;font-weight:700;line-height:1.45;color:var(--navy);
}
.cl-q > summary::-webkit-details-marker{display:none}
.cl-q > summary:hover{color:var(--tangerine)}
.cl-q > summary:focus-visible{outline:2px solid var(--tangerine);outline-offset:3px;border-radius:2px}
.cl-q > summary::after{
  content:"";flex:0 0 auto;
  width:13px;height:13px;margin-top:.42em;
  background:var(--tangerine);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .2s ease;
}
.cl-q[open] > summary{color:var(--tangerine)}
.cl-q[open] > summary::after{transform:rotate(180deg)}
.cl-q__corps{padding:0 56px 24px 0;max-width:78ch}
.cl-q__corps p{font-size:14.5px;line-height:1.75;color:var(--gris)}
.cl-q__lien{margin-top:14px}

/* --------------------------------------------------------------------------
   Formulaire de devis
   -------------------------------------------------------------------------- */
.cl-devis__bloc{max-width:900px;align-items:stretch;text-align:left;padding:44px 48px 40px}
.cl-devis__bloc h2{max-width:none}
.cl-devis__bloc > p{max-width:62ch}
.cl-devis__bloc > p a{white-space:nowrap}
.cl-form{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;
  margin-top:32px;
}
.cl-champ{display:flex;flex-direction:column;gap:7px;margin:0}
.cl-champ--large{grid-column:1/-1}
.cl-champ label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--navy);
}
.cl-req{color:var(--tangerine)}
.cl-champ input,
.cl-champ select,
.cl-champ textarea{
  width:100%;
  font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;color:var(--navy);
  background:var(--blanc);
  border:1px solid var(--trait);
  border-radius:var(--radius);
  padding:13px 14px;
  min-height:48px;
}
.cl-champ textarea{min-height:110px;resize:vertical}
.cl-champ input:focus-visible,
.cl-champ select:focus-visible,
.cl-champ textarea:focus-visible{
  outline:2px solid var(--tangerine);outline-offset:2px;border-color:var(--tangerine);
}
.cl-champ input::placeholder,
.cl-champ textarea::placeholder{color:#9aa2ae}
.cl-aide{font-size:12.5px;line-height:1.5;color:var(--gris)}
.cl-form__envoi{grid-column:1/-1;margin:8px 0 0}
.cl-form__envoi .btn{border:0;cursor:pointer;font-family:inherit}
.cl-form__envoi .btn[disabled]{opacity:.6;cursor:default}
.cl-form__statut{
  grid-column:1/-1;margin:0;
  font-size:14.5px;font-weight:600;line-height:1.6;
}
.cl-form__statut:empty{display:none}
.cl-form__statut.is-attente{color:var(--gris)}
.cl-form__statut.is-ok{color:var(--navy)}
.cl-form__statut.is-ko{color:#c0392b}
.cl-mention{margin-top:26px;font-size:12.5px;line-height:1.6;color:var(--gris)}
.cl-repli{margin-top:12px;font-size:14px;font-weight:600}
.cl-devis__bloc .cl-repli{margin-top:14px}

/* --------------------------------------------------------------------------
   Responsive — page collèges et lycées
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .cl-offres__grid{grid-template-columns:1fr}
  .cl-offre{padding:28px 0;border-left:0!important}
  .cl-offre + .cl-offre{border-top:1px solid var(--trait)}
  .cl-cadre__grid{grid-template-columns:1fr 1fr}
  .cl-cadre__item:not(:nth-child(3n+1)){border-left:0}
  .cl-cadre__item:nth-child(even){border-left:1px solid rgba(254,252,247,.22);padding-right:0}
  .cl-cadre__item:nth-child(odd){padding-left:0}
  .cl-etapes__frise{grid-template-columns:1fr 1fr;gap:0 28px}
  .cl-etape{padding-right:0}
  .cl-etape + .cl-etape{padding-left:0}
  .cl-etape + .cl-etape .cl-etape__num{left:0}
  .cl-etape:nth-child(n+3){margin-top:34px}
  .cl-garanties__liste{grid-template-columns:1fr;gap:0}
  .cl-devis__bloc{padding:36px 30px 32px}
}

@media (max-width:620px){
  .cl-hero{padding:38px var(--gouttiere) 48px}
  .cl-hero__seg{letter-spacing:-1px}
  .cl-hero__actions{gap:14px 20px}
  .cl-hero__actions .btn{width:100%;text-align:center}
  .cl-cadre__grid{grid-template-columns:1fr}
  .cl-cadre__item{padding:24px 0!important;border-left:0!important}
  .cl-etapes__frise{grid-template-columns:1fr}
  .cl-etape:nth-child(n+2){margin-top:34px}
  .cl-q > summary{font-size:15px;gap:16px}
  .cl-q__corps{padding-right:0}
  .cl-form{grid-template-columns:1fr}
  .cl-devis__bloc{padding:30px 20px 26px}
  .cl-form__envoi .btn{width:100%;text-align:center}
}


/* ==========================================================================
   ===== PAGE ÉCOLES SUPÉRIEURES ET UNIVERSITÉS =====
   Règles propres à /ecoles-superieures/. N'affectent aucune page existante.
   Trois blocs nouveaux : comparatif des deux durées, hébergement, onglets.
   ========================================================================== */

/* CTA — une seule forme sur toute la page : pastille navy.
   Le bouton secondaire du hero en reprend le contour. */
.es-cta .btn,
.cl-devis__bloc .cl-form__envoi .btn{
  border-radius:999px;padding:15px 30px;font-size:15px;
  background:var(--navy);color:var(--creme);
  box-shadow:0 6px 18px rgba(44,70,112,.18);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.es-cta .btn:hover,
.cl-devis__bloc .cl-form__envoi .btn:hover{
  background:var(--navy-dark);color:var(--creme);
  box-shadow:0 10px 24px rgba(44,70,112,.24);transform:translateY(-1px);
}
.cl-hero__actions .es-btn--contour{
  background:transparent;color:var(--navy);
  border:2px solid var(--navy);padding:13px 28px;box-shadow:none;
}
.cl-hero__actions .es-btn--contour:hover{
  background:var(--navy);color:var(--creme);box-shadow:none;
}

/* --------------------------------------------------------------------------
   Bloc 03 — comparatif des deux durées, deux colonnes de poids égal
   -------------------------------------------------------------------------- */
.es-duo{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);
  margin-top:42px;border-top:2px solid var(--navy);
}
.es-duo__col{
  display:grid;grid-row:1/-1;grid-template-rows:subgrid;
  padding:30px 0 6px;
}
@supports not (grid-template-rows:subgrid){
  .es-duo__col{grid-template-rows:none}
}
.es-duo__col--gauche{padding-right:44px}
.es-duo__col--droite{padding-left:44px;border-left:1px solid var(--trait)}
.es-duo__duree{
  font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.05;letter-spacing:-1.2px;
  color:var(--navy);padding-bottom:22px;
}
.es-duo__fait{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 0;border-top:1px solid var(--trait);
  font-size:15px;line-height:1.6;color:var(--navy);
}
.es-duo__fait::before{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.52em;
  background:var(--tangerine);
}
.es-duo__lien{align-self:end;padding:22px 0 0}
.es-duo__note{margin-top:20px;font-size:12.5px;line-height:1.6;color:var(--gris)}

/* --------------------------------------------------------------------------
   Bloc 04 — hébergement, deux colonnes de poids égal
   -------------------------------------------------------------------------- */
.es-heberge{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:42px;border-top:2px solid var(--navy);
}
.es-heberge__col{padding:30px 44px 8px 0}
.es-heberge__col + .es-heberge__col{
  padding:30px 0 8px 44px;border-left:1px solid var(--trait);
}
.es-heberge__col h3{font-size:19px;font-weight:700;margin-bottom:14px}
.es-heberge__col p{font-size:14.5px;line-height:1.75;color:var(--gris)}

/* --------------------------------------------------------------------------
   Bloc 05 — le cours, grille de quatre items sur la bande navy
   -------------------------------------------------------------------------- */
.es-cours .cl-cadre__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.es-cours .cl-cadre__item{border-left:0}
.es-cours .cl-cadre__item:nth-child(odd){padding-left:0;padding-right:34px}
.es-cours .cl-cadre__item:nth-child(even){
  padding-left:34px;padding-right:0;
  border-left:1px solid rgba(254,252,247,.22);
}

/* --------------------------------------------------------------------------
   Bloc 06 — ce que c'est, ce que ce n'est pas
   -------------------------------------------------------------------------- */
.es-nature{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px}
.es-nature__col p{margin-top:18px;font-size:15px;line-height:1.75;max-width:52ch}
.es-nature__col--gris h2,
.es-nature__col--gris p{color:var(--gris)}

/* --------------------------------------------------------------------------
   Bloc 07 — onglets porteur de groupe, ouverture au clic
   -------------------------------------------------------------------------- */
.es-onglets{margin-top:40px}
.es-onglets__barre{
  display:flex;gap:8px;
  padding:8px;
  background:var(--blanc);
  border:2px solid var(--navy);
  border-radius:16px;
}
.es-onglet{
  flex:1 1 0;min-width:0;
  appearance:none;font-family:inherit;text-align:left;cursor:pointer;
  background:transparent;color:var(--navy);
  border:1px dashed var(--trait);
  border-radius:11px;
  padding:16px 20px;min-height:64px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.es-onglet:hover{border-color:var(--tangerine)}
.es-onglet:hover .es-onglet__nom{color:var(--tangerine)}
.es-onglet[aria-selected="true"]{
  background:var(--navy);color:var(--creme);border:1px solid var(--navy);
  box-shadow:0 8px 20px rgba(44,70,112,.2);
}
.es-onglet[aria-selected="true"]:hover .es-onglet__nom{color:var(--creme)}
.es-onglet:focus-visible{outline:2px solid var(--tangerine);outline-offset:3px}
.es-panneau:focus-visible{outline:2px solid var(--tangerine);outline-offset:6px}
.es-panneau[hidden]{display:none}
.es-panneau__conclusion{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--trait);
  font-size:14.5px;font-weight:600;line-height:1.7;max-width:74ch;
}

/* --------------------------------------------------------------------------
   Responsive — page écoles supérieures
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  /* Les quatre items du bloc navy passent en pleine largeur : à deux colonnes
     sur tablette, le texte devenait trop serré. */
  .es-cours .cl-cadre__grid{grid-template-columns:1fr}
  .es-cours .cl-cadre__item:nth-child(odd),
  .es-cours .cl-cadre__item:nth-child(even){
    padding:26px 0 28px;border-left:0;
  }
  .es-nature{gap:0 36px}
}

@media (max-width:860px){
  .es-duo{grid-template-columns:1fr;grid-template-rows:none}
  .es-duo__col{grid-row:auto;grid-template-rows:none;padding:26px 0 4px}
  .es-duo__col--gauche{padding-right:0}
  .es-duo__col--droite{padding-left:0;border-left:0;border-top:1px solid var(--trait)}
  .es-heberge{grid-template-columns:1fr}
  .es-heberge__col{padding:26px 0 4px}
  .es-heberge__col + .es-heberge__col{
    padding:26px 0 4px;border-left:0;border-top:1px solid var(--trait);
  }
  .es-nature{grid-template-columns:1fr;gap:0;margin-top:32px}
  .es-nature__col + .es-nature__col{
    margin-top:32px;padding-top:28px;border-top:1px solid var(--trait);
  }
  .es-cours .cl-cadre__item:nth-child(odd),
  .es-cours .cl-cadre__item:nth-child(even){padding-left:0;padding-right:0}
}

@media (max-width:620px){
  .cl-hero__actions .es-btn--contour{width:100%;text-align:center}
  .es-tete{padding-top:26px;gap:12px}
  .es-tete__index{font-size:11px;letter-spacing:1.8px;gap:10px}
  .es-onglets__barre{gap:6px;padding:6px;border-radius:14px}
  .es-onglet{padding:14px 12px;min-height:76px}
  .es-onglet__nom{font-size:13px}
  .es-panneau__conclusion{margin-top:34px}
  .es-duo__duree{padding-bottom:16px}
}


/* --------------------------------------------------------------------------
   Têtes de section — repère chiffré, filet de rupture, titres au même corps
   Utilisées par /ecoles-superieures/ ET /colleges-lycees/.
   -------------------------------------------------------------------------- */
.es-tete{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  padding-top:34px;margin-bottom:6px;
  border-top:3px solid var(--navy);
}
.es-tete::after{
  content:"";position:absolute;top:-3px;left:0;
  width:96px;height:3px;background:var(--tangerine);
}
.es-tete__index{
  display:flex;align-items:center;gap:14px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.2px;
  color:var(--tangerine);
}
.es-tete__index span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;
  background:var(--navy);color:var(--creme);
  font-size:13px;font-weight:700;letter-spacing:0;
  transform:rotate(-3deg);
}
.es-tete .cl-titre{max-width:34ch}
.es-tete .cl-cadre__chapo{margin-top:0}
.es-tete--creme{border-top-color:rgba(254,252,247,.4)}
.es-tete--creme .es-tete__index span{background:var(--tangerine);color:var(--navy-dark)}
.cl-chapo--creme{color:rgba(254,252,247,.72)}

/* Titre du bloc devis aligné sur les autres sections */
.cl-devis__bloc h2.cl-titre{font-size:clamp(26px,3.2vw,40px);max-width:34ch}

/* Bloc 06 — intitulés de colonnes */
.es-nature__col h3{
  font-size:19px;font-weight:700;letter-spacing:-.3px;
  padding-bottom:12px;border-bottom:2px solid var(--trait);
  display:inline-block;
}
.es-nature__col--gris h3{color:var(--gris)}

/* Chapo tenu sur une ligne tant que la largeur le permet */
.es-tete .cl-chapo.es-chapo--ligne{max-width:none}

/* Bloc 07 — bascule entre les deux cas, rendue visible */
.es-onglets__aide{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--tangerine);
}
.es-onglets__aide::before{content:"⇄";font-size:16px;letter-spacing:0}
.es-onglet__cas{
  display:block;margin-bottom:7px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--tangerine);
}
.es-onglet__nom{display:block;font-size:14.5px;font-weight:700;line-height:1.35}

/* --------------------------------------------------------------------------
   Hero — segment en majuscules tangerine, même corps sur les deux pages
   (/colleges-lycees/ et /ecoles-superieures/)
   -------------------------------------------------------------------------- */
.cl-hero__seg{
  color:var(--tangerine);
  font-size:clamp(24px,4.2vw,50px);
  letter-spacing:-1.2px;
}


/* ==========================================================================
   ===== PAGE DESTINATIONS =====
   Règles propres à /destinations/. Préfixe .de-. Ajout en fin de fichier :
   aucune règle existante n'est modifiée. Réemploi des vignettes .dest-card--*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barre des quatre ancres de langue — liens simples, jamais collante
   -------------------------------------------------------------------------- */
.de-ancres{padding:0 var(--gouttiere) 4px}
.de-nav{display:flex;flex-wrap:wrap;gap:10px 12px}
.de-nav a{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blanc);
  border:1px solid var(--trait);
  border-radius:999px;
  padding:11px 22px;
  font-size:14px;font-weight:700;line-height:1;
  color:var(--navy);
  transition:border-color .2s ease,color .2s ease,transform .15s ease;
}
.de-nav a:hover{border-color:var(--tangerine);color:var(--tangerine)}
/* Le lien mène plus bas dans la page : un chevron le dit, et l'appui l'amorce. */
.de-nav a::after{
  content:"";flex:0 0 auto;
  width:9px;height:9px;
  background:var(--tangerine);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .2s ease;
}
.de-nav a:hover::after{transform:translateY(2px)}
.de-nav a:active{transform:translateY(2px)}

/* Défilement doux et arrêt sous le header fixe, plutôt qu'un saut sec. */
html:has(.de-nav){scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 28px)}

/* Section atteinte : le filet tangerine de la tête de section balaie la
   largeur et le repère chiffré s'allume, le temps de situer l'arrivée. */
.de-langue:target .es-tete::after{animation:de-repere 1.4s ease-out 1}
.de-langue:target .es-tete__index span{animation:de-repere-num 1.4s ease-out 1}
@keyframes de-repere{
  0%{width:96px}
  22%{width:100%}
  100%{width:96px}
}
@keyframes de-repere-num{
  0%{background:var(--navy);color:var(--creme)}
  22%{background:var(--tangerine);color:var(--navy-dark)}
  100%{background:var(--navy);color:var(--creme)}
}

/* Chapô du hero : la liste des composants tient sur une seule ligne, la suite
   passe dessous. Sous 860 px la ligne redevient sécable, faute de place. */
.de-chapo{max-width:none}
.de-nobr{white-space:nowrap}
@media (max-width:860px){
  .de-nobr{white-space:normal}
}

/* --------------------------------------------------------------------------
   Sections de langue
   -------------------------------------------------------------------------- */
.de-langue__intro{font-size:15.5px;line-height:1.7;color:var(--gris);max-width:65ch}
.de-langue__note{
  margin-top:34px;padding-top:20px;
  border-top:1px solid var(--trait);
  font-size:14.5px;font-weight:700;line-height:1.6;
}
.de-langue__note a{color:var(--tangerine)}
.de-langue__note a:hover{color:var(--navy)}

/* --------------------------------------------------------------------------
   Grille de cartes — 4 / 3 / 2 / 2 colonnes, jamais une seule
   -------------------------------------------------------------------------- */
.de-grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:38px 28px;
  align-items:start;
  margin-top:36px;
}

/* Lien-carte : nom sous la vignette, aucun cadre ni ombre propre */
.de-carte{
  position:relative;
  display:flex;flex-direction:column;
  color:var(--navy);
  transition:transform .25s ease;
}
.de-carte:hover,.de-carte:focus-visible{color:var(--navy);transform:translateY(-4px)}
.de-carte:hover .de-carte__nom,
.de-carte:focus-visible .de-carte__nom{color:var(--tangerine)}

.de-carte .dest-card{width:100%;aspect-ratio:1;pointer-events:none}
/* Le dégradé crème servait à poser le nom SUR la vignette. Ici il est dessous. */
.de-carte .dest-card::before{display:none}

.de-carte__nom{
  margin-top:16px;
  font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.3px;
  color:var(--navy);
  transition:color .2s ease;
}
.de-carte__pays{
  margin-top:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--gris);
}
.de-carte__accroche{
  margin-top:11px;
  font-size:14px;line-height:1.6;
  color:var(--gris);
}
.de-carte__pastille{
  position:absolute;z-index:3;top:12px;left:12px;
  background:var(--tangerine);color:var(--navy-dark);
  border-radius:3px;
  padding:6px 10px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  line-height:1;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Ce qui change d'une destination à l'autre — grille .cl-cadre__grid sur
   fond crème : filets et couleurs de texte repris pour ce fond.
   -------------------------------------------------------------------------- */
.de-varie .cl-cadre__grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:42px;
  border-top:2px solid var(--navy);
}
.de-varie .cl-cadre__item{border-bottom:1px solid var(--trait)}
.de-varie .cl-cadre__item:not(:nth-child(3n+1)){border-left:0}
.de-varie .cl-cadre__item:nth-child(odd){padding-left:0;padding-right:34px}
.de-varie .cl-cadre__item:nth-child(even){
  padding-left:34px;padding-right:0;
  border-left:1px solid var(--trait);
}
.de-varie .cl-cadre__item h3{color:var(--navy)}
.de-varie .cl-cadre__item p{color:var(--gris)}

/* --------------------------------------------------------------------------
   Responsive — page destinations
   -------------------------------------------------------------------------- */
@media (max-width:1150px){
  .de-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
}

@media (max-width:980px){
  /* Six items sur deux colonnes : la règle d'origine annule le retrait du
     4e item (nth-child(3n+1)), qui se désalignait de la colonne de droite. */
  .de-socle .cl-cadre__item:nth-child(odd){padding-left:0;padding-right:34px}
  .de-socle .cl-cadre__item:nth-child(even){padding-left:34px;padding-right:0}
}

@media (max-width:860px){
  .de-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .de-varie .cl-cadre__grid{grid-template-columns:1fr}
  .de-varie .cl-cadre__item:nth-child(odd),
  .de-varie .cl-cadre__item:nth-child(even){
    padding:26px 0 28px;border-left:0;
  }
}

@media (max-width:620px){
  .de-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:28px}
  /* La vignette reste carrée : le format 16/9 du socle est prévu pour les
     cartes pleine largeur de l'accueil, pas pour deux colonnes étroites. */
  .de-carte .dest-card{aspect-ratio:1}
  .de-carte__nom{margin-top:12px;font-size:15px}
  .de-carte__pays{font-size:10px;letter-spacing:1.2px}
  .de-carte__accroche{margin-top:9px;font-size:13px}
  .de-carte__pastille{top:8px;left:8px;padding:5px 8px;font-size:9.5px;letter-spacing:.8px}
  /* Deux colonnes égales : les quatre langues s'alignent en vis-à-vis. */
  .de-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .de-nav a{justify-content:center;padding:12px 10px;font-size:13px}
  .de-langue__note{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .de-carte:hover,.de-carte:focus-visible{transform:none}
  html:has(.de-nav){scroll-behavior:auto}
  .de-nav a:hover::after,.de-nav a:active{transform:none}
}


/* ==========================================================================
   ===== FICHE DESTINATION =====
   Gabarit des 26 fiches /destinations/<ville>/. Préfixe .fi-.
   Ajout en fin de fichier : aucune règle existante n'est modifiée.
   Une seule ligne est propre à une ville : le croquis du filigrane.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloc 0 — Fil d'Ariane
   -------------------------------------------------------------------------- */
.fi-fil{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  padding-top:26px;
  font-size:14px;color:var(--gris);
}
.fi-fil a{color:var(--gris);font-weight:600}
.fi-fil a:hover{color:var(--tangerine)}
.fi-fil__ici{font-weight:700;color:var(--navy)}

/* --------------------------------------------------------------------------
   Bloc 1 — Hero, croquis de la ville en filigrane
   -------------------------------------------------------------------------- */
.fi-hero{position:relative;overflow:hidden;padding:32px 0 58px}
.fi-hero__motif{
  position:absolute;inset:0;z-index:0;
  opacity:.22;pointer-events:none;
  background-repeat:no-repeat;
  background-position:50% 50%;
  /* Croquis entier, jamais recadré : la hauteur du hero borne l'image. */
  background-size:contain;
}
/* Croquis fourni en trait navy, sans grayscale. .22 est la valeur la plus forte
   qui laisse le titre, l'accroche et le fil d'Ariane pleinement lisibles : le
   trait se devine franchement, sans jamais passer devant le texte. Au-delà
   (.30) les lignes de la tour concurrencent les fins de ligne de l'accroche. */
.fi-hero__inner{position:relative;z-index:1}

/* Une ligne par ville, le fichier et rien d'autre : la géométrie reste dans
   le gabarit, sinon le raccourci par ville l'emporte sur les media queries.
   Le croquis reste entier, posé en filigrane derrière le titre. */
.fi-hero--seville .fi-hero__motif{background-image:url("/assets/destinations/seville.svg")}

.fi-hero .eyebrow{margin-bottom:16px}
.fi-hero__titre{
  font-size:clamp(46px,8.4vw,104px);
  font-weight:700;line-height:.95;letter-spacing:-2.6px;
  color:var(--navy);
}
.fi-hero__phrase{
  margin-top:22px;max-width:44ch;
  font-size:clamp(18px,2.1vw,26px);
  font-weight:600;line-height:1.3;letter-spacing:-.6px;
  color:var(--navy);
}
.fi-faits{
  list-style:none;margin:34px 0 0;padding:20px 0 0;
  display:flex;flex-wrap:wrap;gap:12px 30px;
  border-top:1px solid var(--trait);
}
.fi-fait{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:700;line-height:1.4;color:var(--navy);
}
.fi-fait::before{content:"";flex:0 0 auto;width:8px;height:8px;background:var(--tangerine)}

/* --------------------------------------------------------------------------
   Bloc 2 — À partir de. Le prix ne vit qu'ici, sur toute la fiche.
   -------------------------------------------------------------------------- */
.fi-prix-section{padding-top:0}
.fi-prix__titre{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.2px;
  color:var(--tangerine);margin-bottom:16px;
}
.fi-prix{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fi-prix__col{
  background:var(--blanc);
  border:1px solid var(--trait);
  border-radius:var(--radius);
  padding:28px 30px 26px;
}
.fi-prix__formule{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--navy);
}
/* "à partir de" : même petite capitale navy que la durée, au-dessus du chiffre */
.fi-prix__amorce{margin-top:12px;text-transform:none;letter-spacing:.4px}
.fi-prix__montant{
  margin-top:6px;
  font-size:clamp(36px,4.6vw,56px);
  font-weight:700;line-height:1;letter-spacing:-2px;
  color:var(--navy);
}
/* Plancher résidence non calculé : le placeholder reste lisible et visible. */
.fi-prix__montant--attente{
  display:inline-block;
  font-size:clamp(15px,1.6vw,19px);line-height:1.35;letter-spacing:0;
  border-bottom:2px dashed var(--tangerine);
  padding-bottom:4px;
}
.fi-prix__unite{margin-top:14px;font-size:13.5px;color:var(--gris)}
/* Le vol est compris : c'est le différenciant de l'offre, il se lit avant le
   palier résidence. Pastille tangerine très claire, texte en navy — jamais de
   texte clair sur tangerine — et corps tenu sous celui du montant. */
.fi-prix__vol{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:14px;
  max-width:100%;
  background:rgba(255,107,26,.13);
  border-radius:999px;
  padding:7px 14px 7px 12px;
  font-size:13px;font-weight:700;line-height:1.3;letter-spacing:-.1px;
  white-space:nowrap;
  color:var(--navy);
}
.fi-prix__vol::before{
  content:"";flex:0 0 auto;width:9px;height:9px;background:var(--tangerine);
}
/* Second niveau de lecture : le palier résidence, sous le chiffre famille. */
.fi-prix__resid{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--trait);
  font-size:13.5px;font-weight:700;color:var(--navy);
}
.fi-prix__mentions{
  margin-top:22px;max-width:96ch;
  font-size:12.5px;line-height:1.75;color:var(--gris);
}

/* --------------------------------------------------------------------------
   Bloc 3 — phrase de clôture de la bande navy
   -------------------------------------------------------------------------- */
.fi-cloture{
  margin-top:40px;padding-top:26px;max-width:54ch;
  border-top:1px solid rgba(254,252,247,.22);
  font-size:clamp(17px,1.9vw,21px);
  font-weight:700;line-height:1.45;color:var(--tangerine);
}

/* --------------------------------------------------------------------------
   Blocs 4 à 6 — listes, notes, encart et sous-titres du corps de fiche
   -------------------------------------------------------------------------- */
.fi-soustitre{margin-top:38px;font-size:19px;font-weight:700}
.fi-liste{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--trait)}
/* Flux de texte normal dans le li : la puce est posée en absolu, sinon chaque
   nœud inline (un strong suivi de texte) devient une colonne flex distincte. */
.fi-liste li{
  position:relative;
  padding:15px 0 15px 20px;border-bottom:1px solid var(--trait);
  font-size:14.5px;line-height:1.65;color:var(--gris);
}
.fi-liste li::before{
  content:"";position:absolute;left:0;top:calc(15px + .52em);
  width:8px;height:8px;background:var(--tangerine);
}
.fi-liste strong{color:var(--navy)}
.fi-liste em{font-style:normal;font-weight:700;color:var(--navy)}
.fi-liste--serree li{padding:12px 0 12px 20px;font-size:14px}
.fi-liste--serree li::before{top:calc(12px + .52em)}
/* Colonnes de texte larges : les phrases se coupent le moins possible. */
.fi-note{margin-top:20px;max-width:92ch;font-size:14px;line-height:1.75;color:var(--gris)}
.fi-note--large{max-width:none}
.fi-chapo--large{max-width:none}
.fi-faq .cl-q__corps{max-width:none;padding-right:24px}
.fi-encart{
  margin-top:32px;max-width:76ch;
  background:var(--creme);
  border:1px solid var(--trait);
  border-left:3px solid var(--tangerine);
  border-radius:var(--radius);
  padding:24px 28px 26px;
}
.fi-encart h3{font-size:17px;font-weight:700;margin-bottom:10px}
.fi-encart p{font-size:14.5px;line-height:1.75;color:var(--gris)}
.fi-renvoi{margin-top:18px}

/* Bloc 5 et bloc 10 — deux colonnes de poids égal, sans hiérarchie */
.es-heberge__col .fi-renvoi{margin-top:16px}

/* --------------------------------------------------------------------------
   Bloc 6 — grille du programme, catalogue à choisir et non programme figé
   -------------------------------------------------------------------------- */
.fi-prog__grid{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:42px;border-top:2px solid var(--navy);
}
.fi-prog__col{padding:28px 40px 10px 0}
.fi-prog__col + .fi-prog__col{
  padding:28px 0 10px 40px;border-left:1px solid var(--trait);
}
.fi-prog__col h3{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--tangerine);
}

/* --------------------------------------------------------------------------
   Bloc 7 — frise de la journée type : l'horaire remplace le numéro d'étape.
   Horaires propres au prestataire, à réécrire par prestataire et non par ville.
   -------------------------------------------------------------------------- */
.fi-journee .cl-etape{padding-top:40px}
.fi-journee .cl-etape__num{
  top:-17px;
  width:auto;min-width:38px;height:34px;
  padding:0 13px;
  font-size:13px;letter-spacing:.2px;white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Bloc 9 — quand partir, trois temps courts
   -------------------------------------------------------------------------- */
.fi-quand{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:42px;border-top:2px solid var(--navy);
}
.fi-quand__item{padding:28px 32px 30px;border-bottom:1px solid var(--trait)}
.fi-quand__item + .fi-quand__item{border-left:1px solid var(--trait)}
.fi-quand__item:first-child{padding-left:0}
.fi-quand__item:last-child{padding-right:0}
.fi-quand__item h3{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;margin-bottom:12px;
}
.fi-quand__item h3::before{content:"";flex:0 0 auto;width:9px;height:9px;background:var(--tangerine)}
.fi-quand__item p{font-size:14.5px;line-height:1.7;color:var(--gris)}

/* --------------------------------------------------------------------------
   Responsive — fiche destination
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  /* Six items sur deux colonnes : la règle du socle annule le retrait du 4e
     item (nth-child(3n+1)), qui se désalignait de la colonne de droite. */
  .fi-compris .cl-cadre__item:nth-child(odd){padding-left:0;padding-right:34px}
  .fi-compris .cl-cadre__item:nth-child(even){padding-left:34px;padding-right:0}
  .fi-quand{grid-template-columns:1fr}
  .fi-quand__item{padding:26px 0 28px}
  .fi-quand__item + .fi-quand__item{border-left:0}
}

@media (max-width:860px){
  .fi-hero{padding:26px 0 46px}
  /* Sous 860 px le croquis est aussi large que la colonne de texte : il est
     décalé hors de l'axe du titre et retenu à .16, le texte passant alors
     plus près du trait qu'en grand format. */
  .fi-hero__motif{opacity:.16;background-position:88% 50%}
  .fi-prog__grid{grid-template-columns:1fr}
  .fi-prog__col{padding:26px 0 8px}
  .fi-prog__col + .fi-prog__col{
    padding:26px 0 8px;border-left:0;border-top:1px solid var(--trait);
  }
  /* La frise passe en colonne : l'horaire reste au-dessus de son intitulé. */
  .fi-journee .cl-etape{padding-top:40px}
}

@media (max-width:620px){
  .fi-fil{padding-top:20px;font-size:13px}
  .fi-hero__titre{letter-spacing:-1.6px}
  .fi-hero__phrase{margin-top:18px}
  .fi-faits{gap:10px 22px}
  .fi-prix{grid-template-columns:1fr;gap:14px}
  .fi-prix__col{padding:22px 22px 20px}
  .fi-prix__mentions{font-size:12px}
  .fi-cloture{margin-top:32px;padding-top:22px}
  .fi-encart{padding:20px 20px 22px}
  .fi-liste li,.fi-liste--serree li{font-size:14px}
}
.fi-hero--malaga .fi-hero__motif{background-image:url("/assets/destinations/malaga.svg")}
.fi-hero--madrid .fi-hero__motif{background-image:url('/assets/destinations/madrid.svg')}
.fi-hero--barcelone .fi-hero__motif{background-image:url("/assets/destinations/barcelone.svg")}
.fi-hero--alicante .fi-hero__motif{background-image:url("/assets/destinations/alicante.svg")}

/* Bandeau photo pleine largeur. Pour une autre ville : seuls le src et le alt changent. */
.fi-bandeau{width:100%;margin:0}
.fi-bandeau img{display:block;width:100%;height:380px;object-fit:cover}

/* Carte « Paris → ville », à droite des colonnes de prix. */
.fi-prix__zone{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}
.fi-carte{margin:0;max-width:280px}
.fi-carte svg{display:block;width:100%;height:auto}
.fi-carte__legende{margin-top:10px;font-size:12px;line-height:1.4;color:#6b7280}

/* Sous 1150 px, les deux colonnes de prix n'ont plus la place à côté de la carte :
   elle passe dessous (le min-content des pistes 1fr existantes reste intact). */
/* Le wrapper ne doit pas imposer le min-content des deux colonnes de prix :
   pistes à minmax(0,1fr) pour autoriser la compression, sans toucher .fi-prix. */
.fi-prix__zone>.fi-prix{min-width:0}
@media (min-width:621px){
  .fi-prix__zone .fi-prix{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1150px){
  .fi-prix__zone{grid-template-columns:minmax(0,1fr)}
  .fi-carte{margin-top:22px}
}

@media (max-width:900px){
  .fi-bandeau img{height:260px}
}

@media (max-width:620px){
  .fi-bandeau img{height:200px}
}

/* Fiche destination : bandeau photo avant le header. Le header passe de fixed à sticky,
   il défile avec la photo puis se colle en haut. Aucun parent n'a overflow:hidden. */
body.fiche{padding-top:0}
body.fiche .site-header{position:sticky;top:0;z-index:100}
.fi-hero--brighton .fi-hero__motif{background-image:url("/assets/destinations/brighton.svg")}

/* Fiche Brighton — la pastille « Train aller-retour… » est plus longue que sur
   les fiches précédentes : sous 900 px, la colonne de prix devient trop étroite
   pour la tenir sur une ligne. Elle passe alors sur deux lignes au lieu de
   déborder. Ajout en fin de fichier, aucune règle existante modifiée. */
@media (max-width:900px){
  .fi-prix__vol{
    display:flex;
    align-items:flex-start;
    white-space:normal;
    border-radius:14px;
    padding:9px 14px 9px 12px;
  }
  .fi-prix__vol::before{margin-top:.42em}
}
.fi-hero--cambridge .fi-hero__motif{background-image:url("/assets/destinations/cambridge.svg")}
.fi-hero--londres .fi-hero__motif{background-image:url("/assets/destinations/londres.svg")}
.fi-hero--dublin .fi-hero__motif{background-image:url("/assets/destinations/dublin.svg")}
.fi-hero--york .fi-hero__motif{background-image:url("/assets/destinations/york.svg")}
.fi-hero--valencia .fi-hero__motif{background-image:url("/assets/destinations/valencia.svg")}
/* Fiche Valencia — bandeau panoramique : la photo s'affiche entière, sans recadrage. Réservé aux fiches qui portent fi-bandeau--pano. */
.fi-bandeau--pano img{height:auto;aspect-ratio:1920/825}
/* Destinations : mention sous les villes sans fiche. Navy et non tangerine (lisibilité sur fond crème). */
.de-carte__mention{margin-top:8px;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--navy)}
/* Bande de photos en tête de la page destinations, six vignettes côte à côte. */
.de-bande{padding-top:26px}
.de-bande__grille{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.de-bande__grille img{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block}
@media(max-width:900px){.de-bande__grille{grid-template-columns:repeat(3,1fr)}.de-bande__grille img{height:96px}}
@media(max-width:520px){.de-bande__grille{gap:6px}.de-bande__grille img{height:70px;border-radius:6px}}
/* Emblème des pages segment : petit bloc navy posé à côté du titre. */
.cl-hero--embleme{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px}
.cl-hero--embleme .cl-hero__texte{flex:1 1 430px;min-width:0}
.seg-embleme{flex:0 0 auto;width:210px;background:var(--navy);border-radius:14px;padding:26px 18px 20px;text-align:center}
.seg-embleme__signe{display:block}
.seg-embleme svg{width:118px;height:auto;display:block;margin:0 auto}
.seg-embleme__libelle{display:block;margin-top:16px;color:var(--creme);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.4}
@media(max-width:760px){.cl-hero--embleme{gap:26px}.seg-embleme{width:100%;padding:22px 18px 18px}.seg-embleme svg{width:96px}}
/* Accueil : bandeau dessiné, filet navy en deux segments, logo sans fond.
   À la hauteur du filet, seul le « b » est présent : les vides se mesurent donc
   sur lui, pas sur le mot qui déborde plus bas à droite.
   Largeur du logo entier : 0,613 x hauteur. Largeur du « b » : 0,352 x hauteur. */
.ac-hero{--hero-marge:clamp(56px,8vw,140px);--logo-h:clamp(112px,12vw,190px);--vide:calc(var(--logo-h) * 0.235);
  position:relative;padding-top:var(--hero-marge)}
.ac-hero__vue{display:block;width:100%;height:auto}
.ac-hero__filet{position:absolute;top:var(--hero-marge);border-top:2px solid var(--navy)}
.ac-hero__filet--g{left:0;width:calc(50% - var(--logo-h) * 0.3065 - var(--vide))}
.ac-hero__filet--d{right:0;width:calc(50% - var(--logo-h) * 0.0455 - var(--vide))}
.ac-hero__logo{position:absolute;left:50%;top:var(--hero-marge);transform:translate(-50%,-50%);
  height:var(--logo-h);width:auto;display:block}
@media(max-width:620px){.ac-hero__filet{border-top-width:1.5px}}
/* Fiches : étiquettes vers les autres villes de la même langue, au-dessus de la carte.
   Même orange clair que la pastille « transport compris ». */
.fi-cote{display:flex;flex-direction:column;gap:22px;max-width:280px}
.fi-etiquettes{border:1px solid var(--trait);border-radius:12px;padding:14px}
.fi-etiquettes__intro{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.fi-etiquettes__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fi-etiquette{display:block;text-align:center;padding:6px 8px;border-radius:999px;
  background:rgba(255,107,26,.13);color:var(--navy);text-decoration:none;font-size:12.5px;line-height:1.25;transition:.15s}
.fi-etiquette:hover,.fi-etiquette:focus-visible{background:var(--tangerine);color:var(--navy)}
@media(max-width:1150px){.fi-cote{max-width:none}.fi-etiquettes__liste{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.fi-etiquettes__liste{grid-template-columns:1fr 1fr}}
/* Destinations : pastille sur les villes dont le prix se donne en devis. */
.de-carte__pastille--devis{background:var(--navy);color:var(--creme)}
/* Fiche : la mention des tarifs vit dans la colonne de gauche, sous les prix,
   pour ne pas laisser un vide sous les montants quand la carte est plus haute. */
.fi-prix__gauche{min-width:0}
.fi-prix__gauche .fi-prix__mentions{margin:18px 0 0}
.fi-cote{margin-left:auto}
.fi-carte{max-width:240px}
/* Fiche : la carte et les étiquettes remontent dans le bloc du titre,
   pour que les tarifs et la suite de la page ne soient pas décalés vers le bas. */
.fi-hero__inner--cote{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:34px;align-items:start}
.fi-hero__texte{min-width:0}
.fi-prix__zone--seule{grid-template-columns:minmax(0,1fr)}
@media(max-width:1150px){.fi-hero__inner--cote{grid-template-columns:minmax(0,1fr)}}
/* ================================================================
   Gabarit de fiche, variante 2 : moins de vide, deux niveaux de
   titre, mises en page alternées. Ne s'applique qu'aux pages
   portant la classe fiche--v2 sur le body.
   ================================================================ */
.fiche--v2 .section{padding:54px 0}
.fiche--v2 .fi-hero{padding:26px 0 30px}
/* Filigrane réduit sur TOUTES les fiches, pas seulement la variante 2. */
.fiche .fi-hero__motif{opacity:.15;background-size:auto 74%;background-position:78% 52%}
.fiche--v2 .es-tete{margin-bottom:26px}
.fiche--v2 .fi-prix-section{padding-top:34px}

/* Contenu en deux colonnes : le corps du texte à gauche, un encart à droite. */
@media(min-width:1000px){
  .fiche--v2 .fi-colonnes{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
  .fiche--v2 .fi-colonnes__cote{position:sticky;top:120px}
  .fiche--v2 .fi-colonnes__cote .fi-encart{margin:0}
}

/* Bloc resserré et centré, pour rompre la pleine largeur. */
@media(min-width:900px){
  .fiche--v2 .fi-etroit .container{max-width:880px}
  .fiche--v2 .fi-etroit .es-tete{text-align:center}
  .fiche--v2 .fi-etroit .es-tete .cl-titre{max-width:none;margin-left:auto;margin-right:auto}
  .fiche--v2 .fi-etroit .es-tete .cl-chapo{margin-left:auto;margin-right:auto;max-width:58ch}
  .fiche--v2 .fi-etroit .es-tete__index{justify-content:center}
}

/* Journée type sur fond navy : le second point d'appui de la page. */
.fiche--v2 .fi-journee-navy .cl-etape h3{color:var(--creme)}
.fiche--v2 .fi-journee-navy .cl-etape p{color:rgba(254,252,247,.82)}
.fiche--v2 .fi-journee-navy .cl-etapes__frise::before{background:rgba(254,252,247,.28)}

/* Le hero se termine plus près des tarifs. */
.fiche--v2 .fi-hero{padding-bottom:12px}
.fiche--v2 .fi-prix-section{padding-top:22px}

/* ================================================================
   Gabarit de fiche, variante 3.
   Le libellé du bloc devient un grand titre navy, centré, qui coupe
   un filet traversant, sur le modèle du logo de la page d'accueil.
   Un seul bloc navy, le premier ; les autres alternent crème et
   blanc. Plus aucun filet navy épais au-dessus des colonnes.
   ================================================================ */

/* Le titre de bloc et son filet. */
.fiche--v3 .fi-titre{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
  margin:0 0 30px;color:var(--navy);
  font-size:clamp(20px,2.6vw,30px);font-weight:700;line-height:1.15;
  letter-spacing:.14em;text-transform:uppercase;
}
.fiche--v3 .fi-titre::before,
.fiche--v3 .fi-titre::after{content:"";flex:1 1 auto;height:2px;background:var(--navy)}
.fiche--v3 .fi-titre span{flex:0 0 auto}
/* Sur l'aplat navy, titre et filet passent en crème. */
.fiche--v3 .section--navy .fi-titre{color:var(--creme)}
.fiche--v3 .section--navy .fi-titre::before,
.fiche--v3 .section--navy .fi-titre::after{background:var(--creme)}

/* L'en-tête perd son ancien filet : le titre le remplace. */
.fiche--v3 .es-tete{border-top:0;padding-top:0;margin-bottom:24px}
.fiche--v3 .es-tete::after{display:none}

/* Les sous-titres redescendent d'un cran et passent en tangerine.
   Le texte qui les suit ne change pas. */
.fiche--v3 .cl-titre{font-size:clamp(19px,2vw,26px);color:var(--tangerine)}
.fiche--v3 .cl-titre--petit{font-size:clamp(18px,1.8vw,23px);color:var(--tangerine)}
.fiche--v3 .section--navy .cl-titre{color:var(--tangerine)}

/* Alternance des fonds, à partir du deuxième bloc. */
.fiche--v3 .fi-fond--creme{background:var(--creme)}
.fiche--v3 .fi-fond--blanc{background:var(--blanc)}

/* Plus de filet navy épais au-dessus des paires de colonnes. */
.fiche--v3 .es-heberge,
.fiche--v3 .fi-prog__grid,
.fiche--v3 .es-duo,
.fiche--v3 .fi-quand,
.fiche--v3 .cl-cadre__grid{border-top:0;margin-top:28px}

@media(max-width:620px){
  .fiche--v3 .fi-titre{gap:12px;margin-bottom:22px}
  .fiche--v3 .fi-titre::before,
  .fiche--v3 .fi-titre::after{height:1.5px}
}
/* Hero : le texte se centre face à la colonne de droite, plus compacte,
   pour supprimer le vide entre la phrase de présentation et les tarifs. */
.fiche--v3 .fi-hero{padding-bottom:12px}
.fiche--v3 .fi-prix-section{padding-top:22px}
.fiche--v3 .fi-hero__inner--cote{align-items:center}
.fiche--v3 .fi-cote{max-width:230px;gap:16px}
.fiche--v3 .fi-carte{max-width:200px}
.fiche--v3 .fi-etiquettes{padding:12px}
.fiche--v3 .fi-etiquette{padding:5px 8px;font-size:12px}
@media(max-width:1150px){
  .fiche--v3 .fi-cote{max-width:none;width:100%;margin-left:0}
  .fiche--v3 .fi-carte{max-width:240px;margin-left:auto;margin-right:auto}
  .fiche--v3 .fi-etiquettes__liste{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .fiche--v3 .fi-hero__inner--cote{display:block}
  .fiche--v3 .fi-cote{margin-top:26px}
  .fiche--v3 .fi-etiquettes__liste{grid-template-columns:1fr 1fr}
}
/* Les étiquettes existent deux fois : en haut, dans la colonne de droite,
   pour l'ordinateur ; en bas, avant le bouton de devis, pour le mobile,
   où elles concurrençaient le début de la page. Une seule est affichée. */
.fi-etiquettes--bas{display:none}
@media(max-width:900px){
  .fiche--v3 .fi-etiquettes--haut{display:none}
  .fiche--v3 .fi-etiquettes--bas{display:block;margin:0 0 34px}
}