/* cite-des-anges assets v7 */
/* =====================================================================
   La Cité des Anges — site public
   ---------------------------------------------------------------------
   Direction visuelle reprise du modèle « Genius Course » : surtitres à
   points, titres moitié fins moitié gras, cyan vif, bandes bleues,
   cartes à badge, bande de chiffres, pied de page dense.

   Deux écarts assumés par rapport au modèle :

   1. Le modèle pose du texte blanc sur son cyan vif : 2,3 pour 1 de
      contraste, illisible au soleil comme sur un écran fatigué. Ici le
      cyan reste aussi vif, mais le texte posé dessus est bleu nuit :
      6,9 pour 1. La couleur d'identité est conservée, la lisibilité aussi.
   2. Toutes les couleurs de fond et de texte ont été vérifiées au
      contraste, en thème clair comme en thème sombre.

   Aucune police téléchargée, aucun script tiers : la page s'affiche vite
   sur une connexion mobile lente et ne dépose aucun traceur.
   ===================================================================== */

:root{
  /* Le site public a une seule apparence : la claire.
     Un site vitrine n'est pas un outil de travail — l'école doit savoir
     exactement ce qu'une famille voit, et ce n'est pas au réglage
     d'affichage du téléphone d'un parent d'en décider. L'application de
     gestion, elle, garde son thème sombre : on y passe des heures. */
  color-scheme: light;

  /* teintes de marque */
  --cyan:#14b9d5;          /* fond des boutons et des badges */
  --cyan-clair:#e4f7fb;
  --sur-cyan:#0d1b2e;      /* texte posé sur le cyan */
  --cyan-txt:#0c7286;      /* cyan lisible en texte */
  --orange:#c74210;        /* appel à l'action secondaire */
  --sur-orange:#ffffff;
  --bleu:#1450ad;          /* bandes pleines */
  --bleu-sombre:#0f3d85;
  --sur-bleu:#ffffff;
  --bleu-doux:#cddcf5;
  --cyan-sur-bleu:#8fe6f5;

  /* encres et surfaces */
  --encre:#12203a;
  --encre-2:#56617a;
  --encre-3:#646e82;
  --surface:#ffffff;
  --gris:#f4f7fa;
  --azur:#eaf3fb;
  --nuit:#0d1b2e;
  --nuit-2:#152740;
  --trait:#e2e8f0;
  --trait-2:#cbd5e1;

  --ombre-1:0 1px 2px rgba(13,27,46,.05);
  --ombre-2:0 4px 10px -4px rgba(13,27,46,.14), 0 14px 34px -22px rgba(13,27,46,.4);
  --ombre-3:0 10px 22px -10px rgba(13,27,46,.22), 0 28px 60px -34px rgba(13,27,46,.45);

  --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:24px; --pilule:999px;

  --sans:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --titre:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --large:1200px;
}


/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--surface);color:var(--encre-2);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--cyan-txt);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--encre);margin:0;font-family:var(--titre);line-height:1.18;letter-spacing:-.02em}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cyan-txt);outline-offset:2px;border-radius:4px}

.piege{position:absolute;left:-9999px}
.piege:focus{
  left:12px;top:12px;z-index:100;background:var(--surface);color:var(--encre);
  padding:12px 18px;border-radius:var(--r-m);box-shadow:var(--ombre-2);width:auto;height:auto
}

.dedans{width:100%;max-width:var(--large);margin:0 auto;padding:0 24px}
.dedans.etroit{max-width:820px}
.dedans.moyen{max-width:980px}
.centre{text-align:center}

/* ------------------------------------------------------- surtitre/titre */
/* « •• NOTRE MÉTHODE •• » : la signature du modèle. */
.surtitre{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cyan-txt);margin-bottom:14px
}
.surtitre::before,.surtitre::after{
  content:"";width:14px;height:5px;border-radius:var(--pilule);
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px,currentColor 100%,transparent 0),
    radial-gradient(circle 2.5px at 11.5px 2.5px,currentColor 100%,transparent 0);
  background-repeat:no-repeat
}
.sur-sombre .surtitre{color:var(--cyan-sur-bleu)}

.titre-section{font-size:clamp(28px,4.1vw,42px);font-weight:300;margin-bottom:16px}
.titre-section b{font-weight:800}
.titre-geant{font-size:clamp(34px,6vw,60px);font-weight:300;line-height:1.08;margin-bottom:20px}
.titre-geant b{font-weight:800}
.titre-carte{font-size:17px;font-weight:700;margin-bottom:8px}
.chapo{font-size:17.5px;line-height:1.7;color:var(--encre-2);max-width:66ch}
.centre .chapo{margin-left:auto;margin-right:auto}
.sur-sombre h1,.sur-sombre h2,.sur-sombre h3,.sur-sombre h4{color:#fff}
.sur-sombre,.sur-sombre p{color:var(--bleu-doux)}

.tete-section{margin-bottom:38px}
.tete-section.entre{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tete-section.entre > div{min-width:0}

/* ------------------------------------------------------------- boutons */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-s);border:2px solid transparent;
  font:600 14.5px/1 var(--sans);letter-spacing:.02em;cursor:pointer;
  text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap
}
.bouton:hover{text-decoration:none;transform:translateY(-2px)}
.bouton svg{width:17px;height:17px;flex:0 0 auto}
.bouton-cyan{background:var(--cyan);color:var(--sur-cyan);box-shadow:var(--ombre-1)}
.bouton-cyan:hover{box-shadow:var(--ombre-2)}
.bouton-orange{background:var(--orange);color:var(--sur-orange)}
.bouton-orange:hover{box-shadow:var(--ombre-2)}
.bouton-bleu{background:var(--bleu);color:var(--sur-bleu)}
.bouton-vide{background:transparent;color:var(--encre);border-color:var(--trait-2)}
.bouton-vide:hover{border-color:var(--cyan-txt);color:var(--cyan-txt)}
.sur-sombre .bouton-vide{color:#fff;border-color:rgba(255,255,255,.5)}
.sur-sombre .bouton-vide:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.bouton-blanc{background:#fff;color:var(--nuit)}
.bouton-petit{padding:10px 18px;font-size:13.5px}
.bouton-large{width:100%}

/* Flèches de section, comme les chevrons du modèle. */
.fleches{display:flex;gap:8px;flex:0 0 auto}
.fleches a,.fleches span{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--trait-2);border-radius:var(--r-s);color:var(--encre-2);background:var(--surface)
}
.fleches a:hover{background:var(--cyan);color:var(--sur-cyan);border-color:var(--cyan);text-decoration:none}
.fleches svg{width:16px;height:16px}

/* --------------------------------------------------------- barre haute */
.barre-haut{background:var(--nuit);color:#c3d2ec;font-size:13px}
.barre-haut-in{
  max-width:var(--large);margin:0 auto;padding:9px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap
}
.barre-haut a,.barre-haut span{display:inline-flex;align-items:center;gap:7px;color:#c3d2ec}
.barre-haut a:hover{color:#fff}
.barre-haut svg{width:15px;height:15px;color:var(--cyan)}
.barre-haut .droite{margin-left:auto}

/* -------------------------------------------------------------- entête */
.entete{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--trait)}
.entete-in{
  max-width:var(--large);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:20px
}
.marque-site{display:flex;align-items:center;gap:12px;color:var(--encre);flex:0 0 auto}
.marque-site:hover{text-decoration:none}
.marque-ecu{width:42px;height:42px;flex:0 0 auto}
.marque-nom{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--encre);line-height:1.15}
.marque-sous{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3)}
.menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu a{
  padding:10px 13px;border-radius:var(--r-s);color:var(--encre);
  font-size:14px;font-weight:600;letter-spacing:.01em
}
.menu a:hover{color:var(--cyan-txt);text-decoration:none}
.menu a[aria-current="page"]{color:var(--cyan-txt)}
.menu a.bouton{color:var(--sur-cyan);margin-left:8px}
.burger{
  display:none;margin-left:auto;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--trait-2);border-radius:var(--r-s);background:var(--surface);
  color:var(--encre);font:600 14px var(--sans);cursor:pointer
}

/* ---------------------------------------------------------------- héros */
.heros{position:relative;background:var(--nuit);color:#fff;overflow:hidden}
.heros-fond{position:absolute;inset:0}
.heros-fond img{width:100%;height:100%;object-fit:cover}
.heros-fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,27,46,.86) 0%,rgba(13,27,46,.78) 45%,rgba(13,27,46,.92) 100%)
}
.heros-vide{position:absolute;inset:0;background:
  radial-gradient(1100px 460px at 78% 12%,rgba(20,185,213,.28),transparent 62%),
  linear-gradient(155deg,#0d1b2e 0%,#123057 55%,#0d1b2e 100%)}
.heros-in{position:relative;padding:96px 24px 108px;max-width:var(--large);margin:0 auto;text-align:center}
.heros h1{color:#fff}
.heros .chapo{color:#cddcf5;margin:0 auto 34px}
.heros-motif{position:absolute;inset:0;opacity:.16;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23ffffff' stroke-width='.6'/%3E%3C/svg%3E")}

/* Barre de choix du niveau : la « recherche de cours » du modèle,
   transposée à ce qu'un parent cherche vraiment. */
.barre-choix{
  display:flex;gap:0;max-width:660px;margin:0 auto;background:#fff;
  border-radius:var(--r-s);box-shadow:var(--ombre-3);overflow:hidden;flex-wrap:wrap
}
.barre-choix select{
  flex:1 1 260px;min-width:0;border:0;padding:19px 20px;font:400 15.5px var(--sans);
  color:var(--nuit);background:#fff;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356617a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center
}
.barre-choix select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cyan)}
.barre-choix button{
  flex:0 0 auto;border:0;padding:19px 30px;background:var(--cyan);color:var(--sur-cyan);
  font:700 13.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer
}
.barre-choix button:hover{background:var(--cyan-txt);color:#fff}

/* ---------------------------------------------------------- slider
   Sans JavaScript, les trois vues restent empilées : le contenu est
   lisible et indexable. Le script ajoute .js-slider sur la section et
   c'est seulement là que les vues se superposent. */
.slider{position:relative;background:var(--nuit)}
.slider .slide{position:relative;overflow:hidden}
.slider .slide + .slide{border-top:1px solid rgba(255,255,255,.12)}
.slider .heros-in{padding:104px 24px 140px;max-width:var(--large);margin:0 auto;text-align:center;position:relative}
.slider .heros-in h1,.slider .heros-in h2{color:#fff}
.slider .chapo{color:#cddcf5;margin:0 auto 30px}
.slide-action{margin:0}
.slider-consigne{left:16px;right:auto;bottom:16px;max-width:340px}

/* Trois dégradés distincts, pour que les vues ne se ressemblent pas
   tant que les photos ne sont pas déposées. */
.heros-vide.v1{background:
  radial-gradient(1100px 460px at 78% 12%,rgba(20,185,213,.30),transparent 62%),
  linear-gradient(155deg,#0d1b2e 0%,#123057 55%,#0d1b2e 100%)}
.heros-vide.v2{background:
  radial-gradient(900px 420px at 20% 80%,rgba(20,80,173,.42),transparent 60%),
  linear-gradient(200deg,#0d1b2e 0%,#10254a 60%,#0b1526 100%)}
.heros-vide.v3{background:
  radial-gradient(1000px 500px at 50% 0%,rgba(20,185,213,.22),transparent 60%),
  linear-gradient(120deg,#0b1526 0%,#14345f 50%,#0d1b2e 100%)}

/* Mode carrousel : activé par le script uniquement. */
.slider.js-slider .slider-vues{position:relative}
.slider.js-slider .slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;border-top:0;
  transition:opacity .5s ease
}
.slider.js-slider .slide.actif{position:relative;opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
  .slider.js-slider .slide{transition:none}
}

.slider-fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff;
  transition:background .15s,border-color .15s
}
.slider-fleche:hover{background:var(--cyan);border-color:var(--cyan);color:var(--sur-cyan)}
.slider-fleche svg{width:20px;height:20px}
.slider-fleche.prec{left:18px}
.slider-fleche.suiv{right:18px}

/* La bande de chiffres de l'accueil remonte de 44 px par-dessus le bas du
   slider : les points doivent passer au-dessus de cette zone, sinon ils
   restent visibles mais impossibles à cliquer — la carte blanche
   intercepte le clic. Défaut trouvé par le test, pas à l'œil. */
.slider-points{
  position:absolute;left:0;right:0;bottom:74px;z-index:6;
  display:flex;gap:10px;justify-content:center
}
.slider-points button{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.5);
  transition:width .18s,background .18s
}
.slider-points button[aria-selected="true"]{width:30px;border-radius:var(--pilule);background:var(--cyan);border-color:var(--cyan)}

@media (max-width:860px){
  .slider .heros-in{padding:66px 20px 112px}
  .slider-fleche{width:40px;height:40px}
  .slider-fleche.prec{left:8px}
  .slider-fleche.suiv{right:8px}
}

/* -------------------------------------------------------- rubriques */
.rubrique{position:relative}
.rubrique > button{
  display:inline-flex;align-items:center;gap:6px;padding:10px 13px;
  border:0;background:none;cursor:pointer;color:var(--encre);
  font:600 14px var(--sans);letter-spacing:.01em;border-radius:var(--r-s)
}
.rubrique > button:hover,.rubrique.actif > button{color:var(--cyan-txt)}
.rubrique > button svg{width:13px;height:13px;transition:transform .15s}
.rubrique > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.tiroir{
  display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:224px;z-index:50;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  box-shadow:var(--ombre-3);padding:8px
}
.tiroir.ouvert{display:block}
.tiroir a{display:block;padding:10px 12px;border-radius:var(--r-s);font-size:14px;color:var(--encre)}
.tiroir a:hover{background:var(--gris);color:var(--cyan-txt);text-decoration:none}
.tiroir a[aria-current="page"]{color:var(--cyan-txt);background:var(--cyan-clair)}

@media (max-width:860px){
  .rubrique{width:100%}
  .rubrique > button{width:100%;justify-content:space-between;padding:13px 12px}
  .tiroir{
    position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--trait);
    border-radius:0;margin:0 0 6px 12px;padding:0 0 0 8px;min-width:0
  }
  .tiroir.ouvert{display:block}
}

/* ------------------------------------------------------------ galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.galerie .photo{border-radius:var(--r-m)}
.galerie figure{margin:0}
.galerie figcaption{font-size:12.5px;color:var(--encre-3);margin-top:8px}

/* ---------------------------------------------------------- articles */
.article-carte{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s
}
.article-carte:hover{box-shadow:var(--ombre-3);transform:translateY(-4px)}
.article-carte .corps{padding:20px 22px 22px;flex:1 1 auto;display:flex;flex-direction:column}
.article-carte h3{font-size:18px;font-weight:700;margin:8px 0 10px}
.article-carte h3 a{color:var(--encre)}
.article-carte h3 a:hover{color:var(--cyan-txt);text-decoration:none}
.article-carte .quand{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-txt)
}
.article-carte p{font-size:14.5px;margin-bottom:16px}
.article-carte .lire{margin-top:auto;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px}
.article-carte .lire svg{width:15px;height:15px}
.article-corps{font-size:17px;line-height:1.75}
.article-corps p{margin-bottom:20px}
.article-corps h2,.article-corps h3{margin:32px 0 12px;font-size:22px;font-weight:700}

.heros-page .heros-in{padding:58px 24px 62px}
.heros-page .chapo{margin:0 auto}
.fil{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:22px;font-size:13.5px}
.fil a{color:var(--cyan)}
.fil span{color:#cddcf5}
.fil svg{width:14px;height:14px;color:rgba(255,255,255,.45)}

.puces{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.puces a{
  padding:8px 17px;border-radius:var(--pilule);font-size:13.5px;font-weight:600;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24)
}
.puces a:hover{background:var(--cyan);color:var(--sur-cyan);border-color:var(--cyan);text-decoration:none}

/* ------------------------------------------------------ bandes de fond */
.bande{padding:82px 0}
.bande.serree{padding:56px 0}
.bande.gris{background:var(--gris)}
.bande.azur{background:var(--azur)}
.bande.bleue{position:relative;background:var(--bleu);overflow:hidden}
.bande.bleue::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Ccircle cx='42' cy='42' r='30' fill='none' stroke='%23ffffff' stroke-width='.8'/%3E%3Cpath d='M84 0H0v84' fill='none' stroke='%23ffffff' stroke-width='.5'/%3E%3C/svg%3E")
}
.bande.bleue > .dedans{position:relative}
.bande.nuit{background:var(--nuit)}

/* ---------------------------------------------------- bande de chiffres */
.chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-l);
  box-shadow:var(--ombre-2);overflow:hidden
}
.chiffres > div{display:flex;align-items:center;gap:16px;padding:26px 24px;border-right:1px solid var(--trait)}
.chiffres > div:last-child{border-right:0}
.chiffres .ic{
  flex:0 0 auto;width:48px;height:48px;border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  background:var(--cyan-clair);color:var(--cyan-txt)
}
.chiffres .ic svg{width:24px;height:24px}
.chiffres b{display:block;font-size:26px;font-weight:800;color:var(--encre);line-height:1.1;letter-spacing:-.03em}
.chiffres span{display:block;font-size:13px;color:var(--encre-3);margin-top:3px}

/* -------------------------------------------------------------- grilles */
.grille{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grille > *{min-width:0}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo > *{min-width:0}

/* --------------------------------------------------------------- cartes */
.carte{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:26px;box-shadow:var(--ombre-1)
}
.carte h3{margin-bottom:9px}

/* Carte « cours » du modèle : image, badge, méta, titre, pied. */
.carte-offre{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s
}
.carte-offre:hover{box-shadow:var(--ombre-3);transform:translateY(-4px)}
.carte-offre .visuel{position:relative}
.carte-offre .visuel .photo{border-radius:0}
.badge{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--cyan);color:var(--sur-cyan);
  font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:9px 14px;border-radius:0 var(--r-s) 0 0
}
.badge.orange{background:var(--orange);color:var(--sur-orange)}
.carte-offre .corps{padding:20px 22px 0;flex:1 1 auto}
.meta-haut{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cyan-txt);margin-bottom:10px
}
.meta-haut .sep{color:var(--encre-3)}
.meta-haut .cycle{color:var(--encre-3)}
.carte-offre h3{font-size:18px;font-weight:700;margin-bottom:10px}
.carte-offre h3 a{color:var(--encre)}
.carte-offre h3 a:hover{color:var(--cyan-txt);text-decoration:none}
.carte-offre .prix{font-size:23px;font-weight:800;color:var(--encre);letter-spacing:-.03em}
.carte-offre .prix small{font-size:12.5px;font-weight:500;color:var(--encre-3);letter-spacing:0}
.pied-carte{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding:14px 22px;border-top:1px solid var(--trait);
  font-size:12.5px;color:var(--encre-3)
}
.pied-carte span{display:inline-flex;align-items:center;gap:6px}
.pied-carte svg{width:15px;height:15px;color:var(--cyan-txt)}
.pied-carte .droite{margin-left:auto}

/* Carte à pastille d'icône (prestations, avantages). */
.carte-ic{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:30px 26px}
.carte-ic .pastille{
  width:56px;height:56px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;
  background:var(--cyan-clair);color:var(--cyan-txt);margin-bottom:20px
}
.carte-ic .pastille svg{width:26px;height:26px}
.carte-ic.jaune .pastille{background:#fff3e0;color:#8a4b06}
.carte-ic.vert .pastille{background:#e3f4ec;color:#0b6b4f}
.carte-ic.bleu .pastille{background:#e7effc;color:#123f8f}

/* Avantages sur bande bleue */
.avantage{display:flex;gap:16px;align-items:flex-start}
.avantage .ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)
}
.avantage .ic svg{width:22px;height:22px}
.avantage h3{font-size:16.5px;font-weight:700;margin-bottom:6px}
.avantage p{font-size:14.5px;margin:0}

/* Carte numérotée (le triptyque, les étapes) */
.numerotee{position:relative;padding-top:34px}
.numerotee .etape{
  position:absolute;top:-16px;left:26px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cyan);color:var(--sur-cyan);font-weight:800;font-size:15px;
  box-shadow:var(--ombre-1)
}

/* Citation (les devises du dépliant) */
.citation{
  position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-m);padding:30px 30px 26px
}
.citation p{color:#fff;font-size:17px;line-height:1.6;font-style:italic;margin-bottom:14px}
.citation cite{
  display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--cyan-sur-bleu)
}
.citation .guillemet{
  position:absolute;right:24px;bottom:14px;font-size:64px;line-height:1;
  color:rgba(255,255,255,.16);font-family:Georgia,serif
}

/* ------------------------------------------------------- mockup mobile */
/* Le téléphone du modèle, redessiné en CSS : il contient un vrai
   formulaire, pas une image. */
.telephone{
  max-width:330px;margin:0 auto;background:var(--nuit);border-radius:38px;padding:12px;
  box-shadow:var(--ombre-3);border:1px solid var(--nuit-2)
}
.telephone-ecran{background:var(--surface);border-radius:28px;overflow:hidden}
.telephone-tete{background:var(--bleu);color:#fff;padding:24px 22px 20px;text-align:center}
.telephone-tete h3{color:#fff;font-size:21px;font-weight:800;margin-bottom:6px}
.telephone-tete p{color:var(--bleu-doux);font-size:13px;margin:0}
.telephone-corps{padding:20px 20px 24px}
.telephone-corps .champ{margin-bottom:11px}
.telephone-corps input,.telephone-corps select{
  width:100%;padding:12px 13px;border:1px solid var(--trait-2);border-radius:var(--r-s);
  font:400 14px var(--sans);background:var(--surface);color:var(--encre)
}
.telephone-corps input:focus,.telephone-corps select:focus{outline:none;border-color:var(--cyan-txt);box-shadow:0 0 0 3px var(--cyan-clair)}
.telephone-encoche{width:120px;height:5px;border-radius:var(--pilule);background:rgba(255,255,255,.28);margin:0 auto 10px}
.telephone-bouton{width:110px;height:5px;border-radius:var(--pilule);background:rgba(255,255,255,.28);margin:10px auto 0}

/* ------------------------------------------------------- listes cochées */
.liste-check{display:grid;gap:12px;margin:22px 0}
.liste-check li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--encre-2)}
.liste-check svg{
  flex:0 0 auto;width:20px;height:20px;padding:3px;border-radius:50%;
  background:var(--cyan);color:var(--sur-cyan);margin-top:2px
}
.sur-sombre .liste-check li{color:var(--bleu-doux)}

/* --------------------------------------------------- actualités / dates */
.date-carre{
  flex:0 0 auto;width:66px;border-radius:var(--r-s);overflow:hidden;text-align:center;
  border:1px solid var(--trait)
}
.date-carre b{display:block;background:var(--surface);color:var(--encre);font-size:22px;font-weight:800;padding:8px 0 5px}
.date-carre span{
  display:block;background:var(--cyan);color:var(--sur-cyan);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ligne-evt{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--trait)}
.ligne-evt:last-child{border-bottom:0}
.ligne-evt h4{font-size:15px;font-weight:700;margin-bottom:4px}
.ligne-evt p{font-size:13px;color:var(--encre-3);margin:0}

/* ------------------------------------------------------ tableau tarifs */
.tableau-tarifs{width:100%;border-collapse:collapse;font-size:14.5px}
.tableau-tarifs th,.tableau-tarifs td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--trait)}
.tableau-tarifs thead th{
  background:var(--bleu);color:var(--sur-bleu);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;border-bottom:0
}
.tableau-tarifs thead th:first-child{border-radius:var(--r-s) 0 0 0}
.tableau-tarifs thead th:last-child{border-radius:0 var(--r-s) 0 0}
.tableau-tarifs td.num,.tableau-tarifs th.num{text-align:right;font-variant-numeric:tabular-nums}
.tableau-tarifs tbody tr:hover{background:var(--gris)}
.tableau-tarifs .total{font-weight:800;color:var(--encre)}

/* Cartes de formule */
.formule{
  position:relative;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:30px 26px;display:flex;flex-direction:column
}
.formule.vedette{border:2px solid var(--orange);box-shadow:var(--ombre-2)}
.formule .ruban{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--orange);color:var(--sur-orange);font:700 11px/1 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;padding:8px 15px;border-radius:var(--pilule);white-space:nowrap
}
.formule .cycle{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}
.formule h3{font-size:20px;margin:6px 0 14px}
.formule .montant{font-size:31px;font-weight:800;color:var(--cyan-txt);letter-spacing:-.03em;line-height:1.1}
.formule .par{font-size:12.5px;color:var(--encre-3);margin-bottom:20px}
.formule ul{margin:0 0 22px;display:grid;gap:9px;font-size:14px}
.formule ul li{display:flex;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px dashed var(--trait)}
.formule ul li b{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.formule .bouton{margin-top:auto}

/* --------------------------------------------------------- échéancier */
.tranche{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--trait)}
.tranche:last-child{border-bottom:0}
.tranche .rang{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--bleu);color:var(--sur-bleu);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px
}
.tranche .quoi{flex:1 1 auto;min-width:0}
.tranche .quoi b{display:block;color:var(--encre);font-size:15px}
.tranche .quoi span{font-size:12.5px;color:var(--encre-3)}
.tranche .combien{font-weight:800;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --------------------------------------------------------------- photos */
.photo{
  position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--azur)
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-attente{
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg,rgba(20,185,213,.16),rgba(20,80,173,.16)),
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(18,32,58,.05) 14px 28px),
    var(--azur)
}
.photo-attente .motif{display:flex;color:var(--cyan-txt);opacity:.55}
.photo-attente .motif svg{width:54px;height:54px;stroke-width:1.2}
.photo-consigne{
  position:absolute;left:10px;right:10px;bottom:10px;background:rgba(13,27,46,.9);color:#fff;
  border-radius:var(--r-s);padding:9px 11px;font-size:11.5px;line-height:1.45
}
.photo-consigne b{display:block;font-weight:700;margin-bottom:2px}

/* Cadre décoratif du modèle : un liseré cyan décalé derrière la photo. */
.photo-cadre{position:relative}
.photo-cadre::before{
  content:"";position:absolute;left:-16px;bottom:-16px;width:64%;height:64%;
  border-left:6px solid var(--cyan);border-bottom:6px solid var(--cyan);border-radius:0 0 0 var(--r-m);z-index:0
}
.photo-cadre .photo{position:relative;z-index:1}

/* ------------------------------------------------------------- FAQ */
.faq{display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 56px 19px 22px;position:relative;
  font-weight:700;color:var(--encre);font-size:15.5px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;
  border-radius:var(--r-s);background:var(--cyan-clair);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1v10M1 6h10' fill='none' stroke='%230c7286' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center
}
.faq details[open] summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 6h10' fill='none' stroke='%230c7286' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}
.faq summary:hover{color:var(--cyan-txt)}
.faq .reponse{padding:0 22px 20px;font-size:15px}

/* ----------------------------------------------------------- formulaires */
.form-site{display:grid;gap:18px}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grille .plein{grid-column:1/-1}
.champ label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--encre-3);margin-bottom:7px
}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 15px;border:1px solid var(--trait-2);border-radius:var(--r-s);
  font:400 15px var(--sans);background:var(--surface);color:var(--encre)
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--cyan-txt);box-shadow:0 0 0 3px var(--cyan-clair)
}
.champ .aide{font-size:12.5px;color:var(--encre-3);margin-top:6px}
.bloc-form{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:30px;box-shadow:var(--ombre-1)
}
.bloc-form + .bloc-form{margin-top:20px}
.bloc-form h3{font-size:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--trait)}
.coche{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--encre-2);cursor:pointer}
.coche input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--cyan-txt)}
.coche b{color:var(--encre)}

/* Champ piège anti-robot : invisible pour un humain, pas pour un robot. */
.piege-champ{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.avis{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r-m);font-size:14.5px;align-items:flex-start}
.avis svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.avis.bon{background:#e3f4ec;color:#0b4d3a}
.avis.mauvais{background:#fdeceb;color:#8c2418}
.avis.info{background:var(--cyan-clair);color:#0a5566}
.avis p{margin:0}
.avis .liste{margin-top:8px;display:grid;gap:5px;list-style:disc;padding-left:18px}

/* ------------------------------------------------------------- confirmation */
.confirmation{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-l);
  padding:44px 40px;box-shadow:var(--ombre-2);text-align:center}
.confirmation .rond{
  width:76px;height:76px;border-radius:50%;background:var(--cyan);color:var(--sur-cyan);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px
}
.confirmation .rond svg{width:38px;height:38px;stroke-width:2.6}
.recap{
  text-align:left;background:var(--gris);border-radius:var(--r-m);padding:22px;margin:26px 0;
  display:grid;gap:10px;font-size:14.5px
}
.recap div{display:flex;justify-content:space-between;gap:16px}
.recap b{color:var(--encre)}

/* ---------------------------------------------------------------- CTA */
.cta{
  background:var(--bleu);color:#fff;border-radius:var(--r-l);padding:48px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  position:relative;overflow:hidden
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Ccircle cx='42' cy='42' r='30' fill='none' stroke='%23ffffff' stroke-width='.8'/%3E%3C/svg%3E")
}
.cta > *{position:relative;min-width:0}
/* Le bloc est bleu : le bouton contour y prend les couleurs claires, sinon
   il garde l'encre sombre et devient illisible (2,1 pour 1). */
.cta .bouton-vide{color:#fff;border-color:rgba(255,255,255,.5)}
.cta .bouton-vide:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.cta .surtitre{color:var(--cyan-sur-bleu)}
.cta h2{color:#fff;font-size:clamp(23px,3vw,32px);font-weight:800;margin-bottom:8px}
.cta p{color:var(--bleu-doux);margin:0;max-width:52ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* --------------------------------------------------------- pied de page */
.pied{background:var(--nuit);color:#a9bad6;padding:70px 0 0;font-size:14.5px}
.pied-in{
  max-width:var(--large);margin:0 auto;padding:0 24px 50px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px
}
.pied-in > *{min-width:0}
.pied h4{
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)
}
.pied .marque-nom{color:#fff}
.pied .marque-sous{color:var(--cyan)}
.pied a{color:#a9bad6}
.pied a:hover{color:#fff}
/* Spécificité : « .pied a » (0,1,1) l'emporterait sur « .bouton-cyan »
   (0,1,0) et rendrait le texte du bouton illisible sur le cyan. */
.pied a.bouton-cyan,.pied a.bouton-cyan:hover{color:var(--sur-cyan)}
.pied a.bouton-orange,.pied a.bouton-orange:hover{color:var(--sur-orange)}
.pied ul{display:grid;gap:11px}
.pied ul a{display:inline-flex;align-items:center;gap:9px}
.pied ul svg{width:14px;height:14px;color:var(--cyan);flex:0 0 auto}
.rs{display:flex;gap:10px;margin-top:22px}
.rs a{
  width:38px;height:38px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff
}
.rs a:hover{background:var(--cyan);border-color:var(--cyan);color:var(--sur-cyan)}
.rs svg{width:17px;height:17px}
.legal{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:var(--large);margin:0 auto;padding:20px 24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px
}

/* ------------------------------------------------------------- divers */
.mini{font-size:13px;color:var(--encre-3)}
.gras{color:var(--encre);font-weight:600}
.espace{margin-top:26px}
.matieres{display:flex;gap:9px;flex-wrap:wrap}
.matieres span{
  padding:7px 15px;border-radius:var(--pilule);font-size:13.5px;font-weight:600;
  background:var(--cyan-clair);color:var(--cyan-txt)
}
.sur-sombre .matieres span{background:rgba(255,255,255,.13);color:#fff}

/* ------------------------------------------------------------ réactif */
@media (max-width:980px){
  .duo{grid-template-columns:1fr;gap:38px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .pied-in{grid-template-columns:repeat(2,1fr);gap:34px}
}
@media (max-width:860px){
  .g3{grid-template-columns:1fr}
  .burger{display:inline-flex}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--trait);
    padding:10px 16px 18px;box-shadow:var(--ombre-2)
  }
  .menu.ouvert{display:flex}
  .menu a{padding:13px 12px;border-radius:var(--r-s)}
  .menu a.bouton{margin:8px 0 0;justify-content:center}
  .entete-in{position:relative;flex-wrap:wrap}
  .bande{padding:60px 0}
  .heros-in{padding:64px 20px 74px}
}
@media (max-width:620px){
  /* Un libellé long ne doit pas dépasser du téléphone : sur petit écran
     le bouton passe sur deux lignes plutôt que de déborder la page.
     Trouvé par le test de mise en page, pas à l'œil. */
  .bouton{white-space:normal;text-align:center}
  .g2,.g4{grid-template-columns:1fr}
  .form-grille{grid-template-columns:1fr}
  .pied-in{grid-template-columns:1fr;gap:30px}
  .chiffres > div{border-right:0;border-bottom:1px solid var(--trait)}
  .chiffres > div:last-child{border-bottom:0}
  .cta{padding:34px 24px}
  .confirmation{padding:32px 22px}
  .bloc-form{padding:22px 18px}
  .barre-choix{border-radius:var(--r-m)}
  .barre-choix select,.barre-choix button{flex:1 1 100%}
  .barre-haut-in{gap:12px;font-size:12px}
  .barre-haut .droite{margin-left:0}
  .telephone{max-width:290px}
  .photo-cadre::before{display:none}
}

@media print{
  .barre-haut,.entete,.pied,.cta,.bouton,.fleches{display:none!important}
  body{color:#000;background:#fff}
  .bande{padding:14px 0}
}