/* =========================================================================
   ExamensCI, feuille de style
   -------------------------------------------------------------------------
   Parti pris : un site de service public, pas une page de logiciel.

   Ce qui a changé par rapport à la première version, et pourquoi :

   - Titres en serif. Un titre en serif se lit comme un imprimé, une brochure
     de ministère, un manuel scolaire. C'est le registre que les candidats
     attendent d'une source d'information officielle.
   - Angles peu arrondis, 3 à 8 pixels. Les grands arrondis font logiciel.
   - Très peu d'ombres portées. Des filets de 1 pixel à la place : c'est ce
     qui sépare les blocs dans un document imprimé.
   - Aucun dégradé décoratif, aucune tache colorée floue. Des aplats.
   - Aucun émoji. Un jeu d'icônes au trait, voir assets/js/icones.js.
   - L'orange n'est plus un fond, c'est un filet et un soulignement. Il vient
     du drapeau, il sert à marquer, pas à remplir.

   L'ancienne version reste dans styles-v1-sauvegarde.css.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Bleu institutionnel, du plus profond au plus clair */
  --bleu-nuit:#041E42;
  --bleu:#0B3C8D;
  --bleu-vif:#1152B8;
  --bleu-clair:#4A83D8;
  --bleu-pale:#D8E4F6;
  --bleu-brume:#EDF3FC;
  --bleu-papier:#F6F9FD;

  /* Encre et neutres */
  --encre:#111A2B;
  --encre-2:#2C3A52;
  --gris:#5A6982;
  --gris-clair:#8894A8;
  --filet:#DCE3ED;
  --filet-fort:#C3CEDE;
  --papier:#FFFFFF;
  --fond:#F4F7FB;

  /* Accents, employés avec parcimonie */
  --orange:#E2701A;
  --orange-pale:#FDF0E4;
  --vert:#0F7B52;
  --vert-pale:#E7F4EE;
  --rouge:#B3261E;
  --rouge-pale:#FCEBEA;
  --or:#9A7B16;
  --or-pale:#FBF4DF;

  /* Teintes chaudes. Le blanc integral donnait un site vide et fatigant a
     lire ; ces deux tons portent l'orange sur de grandes surfaces sans
     jamais passer devant le texte. */
  --sable:#FDF6EF;
  --sable-2:#F9EADC;
  --orange-fonce:#B8560F;

  --r-xs:3px;
  --r-s:5px;
  --r-m:8px;
  --r-l:12px;

  --ombre-s:0 1px 2px rgba(4,30,66,.07);
  --ombre-m:0 4px 14px rgba(4,30,66,.09);
  --ombre-l:0 14px 38px rgba(4,30,66,.14);

  --largeur:1180px;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --t:.18s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;max-width:100%;overflow-x:clip;
  /* Fond legerement teinte : les blocs blancs ressortent, la page cesse
     de paraitre vide et le texte gagne en confort de lecture. */
  background:var(--fond);color:var(--encre-2);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--serif);color:var(--encre);font-weight:700;
  letter-spacing:-.01em;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,3.6vw,3.05rem);line-height:1.13}
h2{font-size:clamp(1.55rem,2.5vw,2.1rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.05em}
a{color:var(--bleu-vif);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--bleu-nuit);text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
ul{margin:0 0 1em;padding-left:1.1em}
li{margin-bottom:.3em}
hr{border:0;border-top:1px solid var(--filet);margin:2rem 0}
::selection{background:var(--bleu-pale);color:var(--bleu-nuit)}
:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}

.container{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:22px}
.container-wide{max-width:1360px}
.section{padding:clamp(44px,5.5vw,76px) 0}
.section-tight{padding:clamp(30px,3.6vw,48px) 0}
.bg-soft{background:var(--sable)}
.bg-brume{background:var(--bleu-brume)}
.bg-blanc{background:var(--papier)}
/* Un filet orange en haut de section marque les ruptures de rubrique. */
.bord-orange{border-top:3px solid var(--orange)}

/* Icônes au trait */
.ico{display:inline-block;vertical-align:-.16em;flex-shrink:0}
.btn .ico,.badge .ico,.chip .ico,.side-nav .ico,.admin-side .ico{vertical-align:0}
.panel h3 .ico,.faq-q .ico{vertical-align:0}
.ico-orange{color:var(--orange)}
.ico-bleu{color:var(--bleu)}

/* -------------------------------------------------------------------------
   Barre de service et en-tête
   ------------------------------------------------------------------------- */
.ribbon{background:var(--bleu-nuit);color:#CBD9EE;font-size:.8rem;padding:8px 0;
  border-bottom:2px solid var(--orange);position:relative}
.ribbon .container{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  justify-content:center;text-align:center}
/* Douze montants ne tiennent pas sur une ligne. Plutôt que d'épaissir la
   bande ou de couper une offre en plein mot, on la fait défiler lentement :
   chaque prix passe en entier devant l'œil. La liste est écrite deux fois
   pour que le défilement boucle sans saut visible. */
.ribbon .container{flex-wrap:nowrap;justify-content:flex-start;gap:0;overflow:hidden}
.ribbon-titre{flex:0 0 auto;color:#8FA8CC;text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;font-weight:700;padding-right:12px}
.ribbon-piste{flex:1 1 auto;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ribbon-defile{display:flex;gap:8px;width:max-content;animation:ribbon-defile 70s linear infinite}
.ribbon-piste:hover .ribbon-defile{animation-play-state:paused}
@keyframes ribbon-defile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){
  .ribbon-defile{animation:none}
  .ribbon-piste{overflow-x:auto;scrollbar-width:none}
  .ribbon-piste::-webkit-scrollbar{display:none}
}
.ribbon-fin{flex:0 0 auto;padding-left:14px}
.ribbon b{color:#fff;font-weight:600}
.ribbon a{color:#FFCBA1;font-weight:600}
.ribbon a:hover{color:#fff}
.ribbon-sep{width:1px;height:13px;background:rgba(255,255,255,.22)}
/* Chaque montant annoncé est un lien vers l'offre qui le porte : le visiteur
   qui lit un prix doit pouvoir y aller d'un geste, sans chercher la page. */
.ribbon-prix{display:inline-flex;align-items:center;gap:6px;color:#CBD9EE;font-weight:500;
  padding:3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.ribbon-prix b{color:#fff}
.ribbon-prix:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22)}
.ribbon-prix.vedette b{color:#FFCBA1}
/* Carte d'offre atteinte par un lien de la bande : elle s'annonce, puis
   reprend son apparence ordinaire. */
.offre-visee{box-shadow:0 0 0 3px var(--orange),var(--ombre-m);transition:box-shadow .3s}

.header{position:sticky;top:0;z-index:80;background:var(--papier);
  border-bottom:1px solid var(--filet)}
/* L'en-tête ne doit jamais déborder : le logo et les boutons gardent leur
   taille, la barre de rubriques se resserre, et le dernier bouton reste
   entier. Sans min-width:0 sur la barre, un flex enfant refuse de rétrécir
   et pousse le bouton hors de l'écran. */
.header-inner{display:flex;align-items:center;gap:16px;height:78px;min-width:0}
.logo{display:flex;align-items:center;gap:11px;color:var(--bleu-nuit);flex-shrink:0}
.logo:hover{color:var(--bleu-nuit);text-decoration:none}
.logo-mark{width:44px;height:44px;flex-shrink:0;display:block}
.logo-mark svg{display:block;width:100%;height:100%}
.logo-texte{display:flex;flex-direction:column;justify-content:center;line-height:1.05}
.logo-nom{font-family:var(--serif);font-weight:700;font-size:1.32rem;letter-spacing:-.015em}
.logo-nom i{font-style:normal;color:var(--orange)}
.logo small{display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;
  color:var(--gris);letter-spacing:.1em;text-transform:uppercase;line-height:1.25;margin-top:3px}
/* L'en-tête porte huit rubriques et deux boutons. Il lui faut plus de place
   que le corps de page, dont le conteneur est calibré pour la lecture : sans
   sa propre largeur, le dernier bouton se fait rogner à toutes les tailles
   d'écran, et overflow-x:clip masque le symptôme au lieu de le signaler. */
.header > .container{max-width:1560px}
/* Rien ne doit sortir de l'en-tête : la barre de rubriques cède la place
   avant que le dernier bouton ne soit rogné. */
.header-inner{overflow:visible}
/* Surtout pas d'overflow:hidden ici : le menu « Plus » se déplie sous la barre,
   en position absolue, et un débordement masqué le découperait entièrement.
   Le menu s'ouvrait alors sans que rien n'apparaisse. La barre tient dans
   l'en-tête par les tailles dégressives ci-dessous, pas par un découpage. */
.nav{overflow:visible}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0;flex-shrink:1}
.nav a{padding:10px 11px;font-size:.9rem;font-weight:600;color:var(--encre-2);
  border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--bleu);border-bottom-color:var(--bleu-pale);text-decoration:none}
.nav a.active{color:var(--bleu);border-bottom-color:var(--orange)}
/* Le groupe du compte n'est pas la suite de la navigation : un filet et
   de l'air l'en separent, sinon le menu « Plus » qui la termine passe
   pour un bouton du panier. */
.header-cta{display:flex;align-items:center;gap:8px;margin-left:20px;padding-left:20px;
  border-left:1px solid var(--filet);flex:0 0 auto}
.header-cta .btn{white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1px solid var(--filet);background:#fff;
  border-radius:var(--r-s);cursor:pointer;place-items:center;color:var(--bleu-nuit)}

/* Liens de compte et rubriques secondaires : visibles seulement dans le
   menu replié, où la place ne manque pas. */
.nav-compte,.nav-secondaire{display:none}
/* Rubriques secondaires sur ordinateur : un menu « Plus » */
.nav-plus{position:relative;display:inline-flex}
.nav-plus-btn{background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:.9rem;
  font-weight:600;color:var(--encre-2);padding:10px 11px;cursor:pointer;white-space:nowrap}
.nav-plus-btn:hover,.nav-plus.open .nav-plus-btn{color:var(--bleu)}
.nav-plus-menu{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--filet);
  box-shadow:var(--ombre-m);min-width:230px;flex-direction:column;z-index:60;padding:6px 0}
.nav-plus:hover .nav-plus-menu,.nav-plus:focus-within .nav-plus-menu,.nav-plus.open .nav-plus-menu{display:flex}
.nav-plus-menu a{border-bottom:0;padding:10px 16px;white-space:nowrap}
.nav-plus-menu a:hover{background:var(--bleu-brume)}
.nav-plus-compte{display:none;border-top:1px solid var(--filet) !important;color:var(--bleu) !important;font-weight:700}
@media(max-width:1700px){ .nav-plus-compte{display:block} }
/* Au-dessus de 1700 px, « Se connecter » reapparait dans l'en-tete et
   elargit le groupe du compte d'un coup. Sans resserrer la navigation, le
   menu « Plus » venait chevaucher le panier : mesure a 1920 px, l'ecart
   valait moins quarante pixels. */
@media(min-width:1701px){
  .nav a,.nav-plus-btn{padding:10px 7px}
  .header-inner{gap:14px}
  .header-cta{margin-left:14px;padding-left:14px}
}
@media(min-width:1081px) and (max-width:1700px){
  .header-cta .btn-ghost:not(.bouton-panier){display:none}
  .header-inner{gap:12px}
  .nav a,.nav-plus-btn{padding:10px 9px}
  .header-cta{margin-left:14px;padding-left:14px}
}
@media(min-width:1081px) and (max-width:1480px){
  .logo small{display:none}
  .nav a,.nav-plus-btn{padding:10px 6px;font-size:.85rem}
}
@media(min-width:1081px) and (max-width:1460px){
  .nav a,.nav-plus-btn{padding:10px 7px;font-size:.86rem}
  .header-cta .btn-ghost{display:none}
}
@media(min-width:1081px) and (max-width:1280px){
  .logo small,.logo .logo-sous,.logo-tagline{display:none}
  .nav a,.nav-plus-btn{padding:10px 5px;font-size:.83rem}
}

/* Drapeaux dessinés, voir assets/js/drapeaux.js */
.drapeau{display:inline-block;flex-shrink:0;line-height:0;border-radius:2px;
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(4,30,66,.18)}
.drapeau svg{display:block}
.medaillon .drapeau{box-shadow:0 0 0 1px rgba(4,30,66,.2)}
.mini-ico .drapeau,.chip .drapeau{box-shadow:inset 0 0 0 1px rgba(4,30,66,.22)}

/* -------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 21px;border-radius:var(--r-s);border:1.5px solid transparent;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.94rem;line-height:1.15;
  white-space:nowrap;transition:all var(--t);text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.btn-primary:hover{background:var(--bleu-nuit);border-color:var(--bleu-nuit);color:#fff}
.btn-accent{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-accent:hover{background:#C25E12;border-color:#C25E12;color:#fff}
.btn-ghost{background:#fff;border-color:var(--filet-fort);color:var(--encre-2)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-fonce);background:var(--sable)}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-light:hover{background:#fff;color:var(--bleu-nuit);border-color:#fff}
.btn-sm{padding:8px 14px;font-size:.85rem}
.btn-lg{padding:15px 28px;font-size:1rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* -------------------------------------------------------------------------
   Étiquettes
   ------------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:var(--r-xs);font-size:.75rem;font-weight:600;
  font-family:var(--sans);white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
/* Dans une carte etroite, une etiquette longue passe a la ligne plutot que
   d'etre tronquee : le niveau requis est une information, pas un ornement. */
.cc-meta .badge{white-space:normal;overflow:visible}
.badge-blue{background:var(--bleu-brume);color:var(--bleu)}
.badge-orange{background:var(--orange-pale);color:#9C4A0B}
.badge-green{background:var(--vert-pale);color:var(--vert)}
.badge-red{background:var(--rouge-pale);color:var(--rouge)}
.badge-grey{background:#EFF2F7;color:var(--gris)}
.badge-gold{background:var(--or-pale);color:var(--or)}
.badge-outline{background:#fff;border:1px solid var(--filet-fort);color:var(--gris)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Sur-titre : petite capitale soulignée d'un filet orange */
.kicker{display:inline-block;font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);
  padding-bottom:7px;border-bottom:2px solid var(--orange);margin-bottom:16px}

/* -------------------------------------------------------------------------
   Bandeau d'ouverture
   ------------------------------------------------------------------------- */
.hero{background:var(--bleu-nuit);color:#fff;padding:clamp(48px,5.5vw,80px) 0;
  position:relative;border-bottom:4px solid var(--orange);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(115deg,transparent 0 56%,rgba(255,255,255,.035) 56% 61%,transparent 61%),
    linear-gradient(115deg,transparent 0 71%,rgba(255,255,255,.028) 71% 78%,transparent 78%)}
.hero>*{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{color:#fff;margin-bottom:.42em}
.hero h1 em{font-style:italic;color:#FFC08A;font-weight:600}
.hero-lead{font-size:clamp(1rem,1.25vw,1.12rem);color:rgba(255,255,255,.86);
  max-width:38em;margin-bottom:1.7em}
.hero .kicker{color:#9FBEEB;border-bottom-color:var(--orange)}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:34px}

/* Chiffres clés, sobres : pas d'animation, des faits */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.2)}
.hero-stat{padding:0 18px;border-left:1px solid rgba(255,255,255,.14)}
.hero-stat:first-child{padding-left:0;border-left:0}
.hero-stat b{display:block;font-family:var(--serif);font-size:1.8rem;
  font-weight:700;line-height:1.1;color:#fff}
.hero-stat span{font-size:.78rem;color:rgba(255,255,255,.66);font-weight:500}

/* -------------------------------------------------------------------------
   Encadré d'actualité
   ------------------------------------------------------------------------- */
.hero-card{background:#fff;border-radius:var(--r-m);overflow:hidden;
  color:var(--encre-2);box-shadow:var(--ombre-l)}
.hero-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--filet);background:var(--bleu-brume)}
.hero-card-head h4{margin:0;font-size:.98rem;color:var(--bleu-nuit)}
.hero-card-corps{padding:4px 10px 12px}
.mini-row{display:flex;align-items:flex-start;gap:12px;padding:12px 10px;
  border-bottom:1px solid var(--filet);transition:background var(--t)}
.mini-row:last-child{border-bottom:0}
.mini-row:hover{background:var(--bleu-papier);text-decoration:none}
.mini-ico{width:34px;height:34px;border-radius:var(--r-xs);background:var(--sable-2);
  color:var(--orange-fonce);display:grid;place-items:center;flex-shrink:0;
  font-weight:700;font-size:.82rem;font-family:var(--serif)}
.mini-row strong{display:block;font-size:.88rem;font-weight:600;color:var(--encre);line-height:1.35}
.mini-row small{color:var(--gris);font-size:.78rem}
.mini-row .price{margin-left:auto;font-weight:700;font-size:.79rem;color:var(--orange);white-space:nowrap}

/* -------------------------------------------------------------------------
   Recherche
   ------------------------------------------------------------------------- */
.searchbar{display:flex;background:#fff;padding:6px;border-radius:var(--r-s);
  max-width:660px;border:1px solid var(--filet)}
.searchbar input,.searchbar select{border:0;outline:0;font-family:var(--sans);
  font-size:.95rem;color:var(--encre);background:transparent;padding:11px 13px}
.searchbar input{flex:1;min-width:0}
.searchbar select{border-left:1px solid var(--filet);color:var(--gris);
  cursor:pointer;max-width:190px}
.searchbar .btn{margin-left:6px}

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

.card{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);
  padding:22px;transition:border-color var(--t),box-shadow var(--t)}
.card:hover{border-color:var(--filet-fort);box-shadow:var(--ombre-s)}
.card-flat:hover{box-shadow:none;border-color:var(--filet)}

/* Famille de concours */
.cat-card{display:block;padding:24px;border:1px solid var(--filet);background:#fff;
  border-radius:var(--r-m);height:100%;position:relative;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t)}
.cat-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;transition:background var(--t)}
.cat-card:hover{border-color:var(--filet-fort);box-shadow:var(--ombre-m);text-decoration:none}
.cat-card:hover::after{background:var(--orange)}
.cat-ico{width:48px;height:48px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--bleu-brume);color:var(--bleu);margin-bottom:16px}
/* Une famille sur deux prend l'accent chaud : la grille cesse d'etre
   monochrome sans pour autant devenir bariolee. */
.cat-card:nth-child(2n) .cat-ico{background:var(--sable-2);color:var(--orange-fonce)}
.cat-card h3{font-size:1.05rem;margin-bottom:.35em;min-height:2.4em;display:flex;align-items:flex-start}
.cat-card p{font-size:.88rem;color:var(--gris);margin-bottom:.85em}
.cat-count{font-size:.83rem;font-weight:600;color:var(--bleu-vif);
  display:inline-flex;align-items:center;gap:6px}

/* Fiche concours */
.concours-card{display:flex;flex-direction:column;gap:13px;background:#fff;
  border:1px solid var(--filet);border-radius:var(--r-m);padding:20px;height:100%;
  transition:border-color var(--t),box-shadow var(--t)}
.concours-card:hover{border-color:var(--filet-fort);box-shadow:var(--ombre-m);text-decoration:none}
.cc-top{display:flex;align-items:center;gap:14px}
.cc-title{flex:1;min-width:0}
.cc-title h3{font-size:1.03rem;margin:0 0 3px;line-height:1.28}
.cc-title small{color:var(--gris);font-size:.81rem}
.cc-meta{display:flex;flex-wrap:wrap;gap:6px}
.cc-desc{font-size:.87rem;color:var(--gris);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--filet)}
.cc-price{font-weight:700;color:var(--bleu-nuit);font-size:.95rem;font-family:var(--serif)}
.cc-price small{display:block;font-family:var(--sans);font-weight:500;
  color:var(--gris-clair);font-size:.72rem;line-height:1.2}

/* -------------------------------------------------------------------------
   Tableaux
   ------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--filet);border-radius:var(--r-m);
  background:#fff;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:.89rem}
thead th{background:var(--bleu-brume);color:var(--bleu-nuit);font-weight:700;
  text-align:left;padding:12px 16px;white-space:nowrap;
  border-bottom:1px solid var(--filet-fort);font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase}
tbody td{padding:13px 16px;border-bottom:1px solid var(--filet);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bleu-papier)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------------
   Filtres et formulaires
   ------------------------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{padding:8px 14px;border-radius:var(--r-xs);border:1px solid var(--filet-fort);
  background:#fff;color:var(--encre-2);font-size:.85rem;font-weight:600;
  font-family:var(--sans);cursor:pointer;transition:all var(--t);white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--orange);color:var(--orange-fonce);background:var(--sable)}
.chip.active{background:var(--bleu);border-color:var(--bleu);color:#fff}
.chip.active .ico{color:#fff}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.81rem;font-weight:600;color:var(--encre-2)}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1px solid var(--filet-fort);
  border-radius:var(--r-s);font-family:var(--sans);font-size:.93rem;color:var(--encre);
  background:#fff;outline:0;transition:border-color var(--t),box-shadow var(--t)}
.input:focus{border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)}
.input::placeholder{color:var(--gris-clair)}

/* -------------------------------------------------------------------------
   Pages de rubrique
   ------------------------------------------------------------------------- */
.page-head{background:var(--bleu-nuit);color:#fff;padding:34px 0 40px;
  border-bottom:4px solid var(--orange)}
.page-head h1{color:#fff;font-size:clamp(1.7rem,3vw,2.45rem)}
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.66);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.88)}
.breadcrumb a:hover{color:#fff}

.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.detail-grid>*{min-width:0}
/* Variantes de la grille a deux colonnes. On passe par des classes et non par
   un style en ligne, sans quoi la mise en page mobile ne peut plus reprendre
   la main : un attribut style l'emporte sur la feuille. */
.detail-grid.colonne-360{grid-template-columns:minmax(0,1fr) 360px}
.detail-grid.deux-egales{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.panel{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);
  padding:26px;margin-bottom:20px}
.panel h3{display:flex;align-items:center;gap:11px;font-size:1.13rem;margin-bottom:.9em;
  padding-bottom:.55em;border-bottom:2px solid var(--sable-2)}
.panel h3 .ico{color:var(--bleu)}
.panel h3 .badge{margin-left:auto}
.sticky-buy{position:sticky;top:98px}

/* Encadré d'achat */
.buy-card{background:#fff;border:1px solid var(--filet-fort);border-radius:var(--r-m);overflow:hidden}
.buy-head{background:var(--bleu-nuit);color:#fff;padding:22px 24px;
  border-bottom:3px solid var(--orange)}
.buy-price{font-family:var(--serif);font-size:2.05rem;font-weight:700;line-height:1;color:#fff}
.buy-price small{font-family:var(--sans);font-size:.87rem;font-weight:500;opacity:.78}
.buy-body{padding:22px 24px}
.check-list{list-style:none;padding:0;margin:0 0 18px}
.check-list li{display:flex;gap:11px;font-size:.88rem;color:var(--encre-2);
  margin-bottom:11px;align-items:flex-start;line-height:1.5}
.check-list li::before{content:'';width:14px;height:14px;flex-shrink:0;margin-top:5px;
  background:var(--vert-pale);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--vert)}

/* Chronologie */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 22px 30px;border-left:1px solid var(--filet-fort)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:-5px;top:5px;width:9px;height:9px;
  border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--filet-fort)}
.timeline li.done::before{background:var(--vert);box-shadow:inset 0 0 0 2px var(--vert)}
.timeline li.next::before{background:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange),0 0 0 4px var(--orange-pale)}
.timeline strong{display:block;font-size:.94rem;font-weight:600;color:var(--encre)}
.timeline small{color:var(--gris);font-size:.83rem}

/* Contenu verrouillé */
.locked{position:relative;border-radius:var(--r-m);overflow:hidden}
.locked-blur{filter:blur(3.5px);opacity:.5;pointer-events:none;user-select:none}
.locked-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:24px;background:linear-gradient(to bottom,rgba(255,255,255,.4),rgba(255,255,255,.97))}
.lock-badge{width:48px;height:48px;border-radius:50%;background:var(--bleu-nuit);color:#fff;
  display:grid;place-items:center;margin:0 auto 14px}

/* Étapes numérotées */
.steps{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.step{position:relative;padding:28px 26px 26px;border-right:1px solid var(--filet)}
.step:last-child{border-right:0}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--serif);font-size:1.55rem;font-weight:700;
  color:var(--orange);line-height:1;margin-bottom:12px}
.step h4{margin:0 0 7px;font-size:1.03rem}
.step p{font-size:.87rem;color:var(--gris);margin:0}

/* -------------------------------------------------------------------------
   Bourses
   ------------------------------------------------------------------------- */
.bourse-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--filet);
  border-radius:var(--r-m);overflow:hidden;height:100%;
  transition:border-color var(--t),box-shadow var(--t)}
.bourse-card:hover{border-color:var(--filet-fort);box-shadow:var(--ombre-m);text-decoration:none}
.bourse-flag{height:76px;background:var(--bleu-nuit);display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;color:#fff;border-bottom:3px solid var(--orange)}
.bourse-flag .emoji{font-size:1.9rem}
.bourse-body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.bourse-body h3{font-size:1.01rem;margin:0;line-height:1.3}

/* -------------------------------------------------------------------------
   Témoignages
   ------------------------------------------------------------------------- */
.quote{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);
  padding:26px;height:100%;position:relative;overflow:hidden}
.quote::before{content:'\201C';position:absolute;top:2px;right:20px;
  font-family:var(--serif);font-size:4.2rem;color:var(--bleu-pale);line-height:1}
.quote p{font-family:var(--serif);font-size:1.01rem;color:var(--encre);
  font-style:italic;position:relative;z-index:2}
.quote-author{display:flex;align-items:center;gap:12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--filet)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--bleu-brume);
  color:var(--bleu);display:grid;place-items:center;font-weight:700;font-size:.87rem;flex-shrink:0}
.stars{color:var(--or);font-size:.82rem;letter-spacing:2px;margin-bottom:12px}

/* -------------------------------------------------------------------------
   Questions fréquentes
   ------------------------------------------------------------------------- */
.faq-item{border-bottom:1px solid var(--filet);background:#fff}
.faq-item:first-child{border-top:1px solid var(--filet)}
.faq-q{width:100%;text-align:left;padding:19px 4px;background:none;border:0;cursor:pointer;
  font-family:var(--serif);font-weight:600;font-size:1.03rem;color:var(--encre);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq-q:hover{color:var(--bleu)}
.faq-q .ico{color:var(--bleu);transition:transform var(--t);margin-top:3px}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}
.faq-a{display:none;padding:0 4px 20px;font-size:.93rem;color:var(--gris);max-width:72ch}
.faq-item.open .faq-a{display:block}

/* -------------------------------------------------------------------------
   Appel à l'action
   ------------------------------------------------------------------------- */
.cta-band{background:var(--bleu-nuit);border-radius:var(--r-m);
  padding:clamp(34px,4.4vw,56px);color:#fff;text-align:center;
  border-top:4px solid var(--orange)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.84)}

/* -------------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------------- */
.footer{background:var(--bleu-nuit);color:rgba(255,255,255,.7);
  padding:54px 0 24px;font-size:.88rem;border-top:4px solid var(--orange)}
.footer h5{color:#fff;font-family:var(--sans);font-size:.77rem;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:15px;font-weight:700;
  padding-bottom:8px;border-bottom:2px solid var(--orange);display:inline-block}
.footer a{color:rgba(255,255,255,.7);display:block;padding:4px 0}
/* Les lignes d'assistance, côte à côte. Les liens du pied sont en bloc :
   sans cette exception, les deux numéros s'empileraient et le séparateur
   se retrouverait seul sur sa ligne. */
.footer .pied-tel{display:block;padding:4px 0}
.footer .pied-tel a{display:inline}
.footer a:hover{color:#fff}
.footer .logo{color:#fff}
.footer .logo:hover{color:#fff}
.footer .logo small{color:rgba(255,255,255,.55)}
.footer .logo-mark{background:#fff;color:var(--bleu-nuit)}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:32px}
.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.81rem}
.pay-logos{display:flex;gap:7px;flex-wrap:wrap}
.pay-logo{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xs);padding:5px 10px;font-size:.71rem;font-weight:600;color:#fff}

/* -------------------------------------------------------------------------
   Fenêtres modales
   ------------------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px;
  background:rgba(4,30,66,.6)}
.modal.open{display:grid}
.modal-box{background:#fff;border-radius:var(--r-m);width:100%;max-width:480px;
  box-shadow:var(--ombre-l);max-height:92vh;overflow:auto}
.modal-head{padding:22px 26px 0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:14px}
.modal-head h3{margin:0}
.modal-body{padding:18px 26px 26px}
.close-x{background:none;border:0;color:var(--gris);cursor:pointer;line-height:1;padding:4px}
.close-x:hover{color:var(--encre)}
.pay-option{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:1px solid var(--filet-fort);border-radius:var(--r-s);cursor:pointer;
  margin-bottom:8px;transition:all var(--t)}
.pay-option:hover{border-color:var(--bleu-clair);background:var(--bleu-papier)}
.pay-option.sel{border-color:var(--bleu);background:var(--bleu-brume);
  box-shadow:inset 0 0 0 1px var(--bleu)}
.pay-option .po-ico{width:46px;height:31px;border-radius:var(--r-xs);display:grid;
  place-items:center;font-size:.6rem;font-weight:700;color:#fff;flex-shrink:0;
  text-align:center;line-height:1}

/* Choix du réseau, juste avant de partir payer.
   Le client choisit ici parce que la page de la passerelle se fige sur un
   seul opérateur. Les lignes sont larges et bien espacées : on les touche
   au pouce, sur un téléphone, souvent dehors. */
.choix-reseau-titre{text-align:center;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:.72rem;color:var(--bleu);margin-bottom:12px}
.reseau{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:12px 14px;margin-bottom:9px;cursor:pointer;
  background:var(--carte,#fff);border:1px solid var(--filet-fort);
  border-radius:var(--r-s);transition:all var(--t)}
.reseau:hover:not(:disabled){border-color:var(--bleu);background:var(--bleu-papier)}
.reseau:disabled{opacity:.5;cursor:default}
.reseau-attente{opacity:1 !important;border-color:var(--bleu)}
.reseau-logo{width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;line-height:1}
.reseau-nom{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.reseau-nom strong{font-size:.98rem}
.reseau-fleche{color:var(--gris);font-size:1.4rem;line-height:1;flex-shrink:0}

/* Compte marchand */
.compte-marchand{background:var(--bleu-nuit);color:#fff;border-radius:var(--r-m);
  padding:20px;text-align:center;border-top:3px solid var(--orange)}
.numero-marchand{font-family:var(--serif);font-size:1.8rem;font-weight:700;
  letter-spacing:.05em;margin:7px 0 5px;line-height:1.1}
.recap{border:1px solid var(--filet);border-radius:var(--r-s);overflow:hidden}
.recap-ligne{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--filet);font-size:.86rem}
.recap-ligne:last-child{border-bottom:0}
.recap-ligne span{color:var(--gris)}
.recap-ligne strong{text-align:right;word-break:break-word;font-weight:600}

/* -------------------------------------------------------------------------
   Notifications
   ------------------------------------------------------------------------- */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;
  flex-direction:column;gap:9px;max-width:calc(100vw - 44px)}
.toast{background:var(--encre);color:#fff;padding:13px 18px;border-radius:var(--r-s);
  font-size:.88rem;box-shadow:var(--ombre-l);display:flex;gap:10px;align-items:center;
  animation:entre .25s ease;border-left:3px solid var(--bleu-clair)}
.toast.ok{border-left-color:var(--vert)}
.toast.err{border-left-color:var(--rouge)}
@keyframes entre{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* -------------------------------------------------------------------------
   Espace abonné
   ------------------------------------------------------------------------- */
.account-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
.account-grid>*{min-width:0}
.side-nav{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);
  padding:8px;position:sticky;top:98px;max-width:100%}
.side-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-xs);
  font-size:.89rem;font-weight:600;color:var(--encre-2);cursor:pointer}
.side-nav a:hover{background:var(--bleu-papier);color:var(--bleu);text-decoration:none}
.side-nav a.active{background:var(--bleu);color:#fff}
.side-nav a.active .ico{color:#fff}
.stat-tile{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);
  padding:20px;border-top:3px solid var(--orange)}
.stat-tile b{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:700;
  color:var(--bleu-nuit);line-height:1.1}
.stat-tile span{font-size:.82rem;color:var(--gris)}
.doc-row{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid var(--filet);
  border-radius:var(--r-s);margin-bottom:8px;background:#fff;transition:border-color var(--t)}
.doc-row:hover{border-color:var(--filet-fort)}
.doc-ico{width:38px;height:46px;border-radius:var(--r-xs);background:var(--rouge-pale);
  color:var(--rouge);display:grid;place-items:center;font-size:.6rem;font-weight:700;flex-shrink:0}

/* Arborescence des documents */
.arbo{border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;
  margin-bottom:12px;background:#fff}
.arbo-tete{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;
  background:var(--bleu-brume);border-bottom:1px solid transparent;transition:background var(--t)}
.arbo-tete:hover{background:var(--bleu-pale)}
.arbo.ouvert>.arbo-tete{border-bottom-color:var(--filet)}
.arbo-tete h3{margin:0;font-size:1.03rem}
.arbo-tete .sous{font-size:.81rem;color:var(--gris)}
.arbo-titre{flex:1 1 auto;min-width:0}
.annee-titre{flex:1 1 auto;font-weight:600;font-size:.92rem}
.cellule{flex:1 1 0%;min-width:0}
.chevron{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;
  color:var(--bleu);transition:transform var(--t)}
.arbo.ouvert>.arbo-tete .chevron{transform:rotate(90deg)}
.arbo-corps{display:none;padding:14px 18px 18px}
.arbo.ouvert>.arbo-corps{display:block}

.annee{border:1px solid var(--filet);border-radius:var(--r-s);margin-bottom:8px;overflow:hidden}
.annee-tete{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;
  background:#fff;transition:background var(--t)}
.annee-tete:hover{background:var(--bleu-papier)}
.annee-corps{display:none;padding:6px 15px 14px;border-top:1px solid var(--filet)}
.annee.ouvert .annee-corps{display:block}
.annee.ouvert .annee-tete{background:var(--bleu-papier)}
.annee.ouvert .annee-tete .chevron{transform:rotate(90deg)}
.pastille-nb{background:var(--bleu-brume);color:var(--bleu);border-radius:var(--r-xs);
  padding:2px 8px;font-size:.74rem;font-weight:600}
.pastille-nb.pastille-rouge,.pastille-rouge{background:#C0392B;color:#fff;font-weight:700;border-radius:99px;padding:1px 8px;font-size:.74rem;min-width:20px;text-align:center;display:inline-block;line-height:1.5}
.admin-side a .pastille-rouge{margin-left:auto}
/* Une pastille porte un nombre : à zéro, elle se retire. Le display posé
   ci-dessus l'emportait sur l'attribut hidden, et le panier vide affichait
   un « 0 » rouge en permanence. */
.pastille-rouge[hidden],.pastille-nb[hidden]{display:none}
/* Le panier reste atteignable a toutes les largeurs : c'est la seule
   porte vers le paiement groupe. Les autres boutons de l'en-tete
   s'effacent sur les ecrans etroits, pas celui-la. */
.bouton-panier{position:relative;display:inline-flex!important;align-items:center;gap:6px}
.bouton-panier .pastille-rouge{margin-left:2px}
@media(max-width:560px){
  /* Sur telephone, le panier se reduit a son icone et son compteur, et la
     signature sous le logo s'efface pour lui faire de la place. */
  .header-cta{display:flex!important;margin-left:auto;padding-left:0;border-left:0;gap:4px}
  .header-cta .btn:not(.bouton-panier){display:none}
  .bouton-panier{padding:8px 9px;flex:0 0 auto}
  .bouton-panier .mot-panier{display:none}
  .header-inner .logo small{display:none}
  .header-inner{gap:8px}
  .burger{margin-left:0}
}
.recap-panier{border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden}
.ligne-panier{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--filet);font-size:.92rem}
.ligne-panier:last-child{border-bottom:0}
.ligne-panier b{font-family:var(--serif);font-weight:800;white-space:nowrap}
.ligne-panier .close-x{font-size:1.1rem;line-height:1;padding:0 4px}
.ligne-panier.total{background:var(--bleu-brume);font-weight:700}
.ligne-panier.total b{font-size:1.1rem;color:var(--bleu)}
.fil-messages{max-height:420px;overflow:auto;background:var(--fond,#F6F7FB);border:1px solid var(--filet);border-radius:var(--r-m);padding:14px;display:flex;flex-direction:column;gap:10px}
.bulle{max-width:82%;padding:10px 13px;border-radius:14px;font-size:.92rem;line-height:1.45}
.bulle-moi{align-self:flex-end;background:var(--bleu);color:#fff;border-bottom-right-radius:4px}
.bulle-equipe{align-self:flex-start;background:#fff;border:1px solid var(--filet);border-bottom-left-radius:4px}
.bulle-date{font-size:.7rem;opacity:.7;margin-top:4px}
.en-ligne{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#1E8E3E;background:#E8F5EC;border-radius:99px;padding:3px 10px}
.en-ligne .dot{width:8px;height:8px;border-radius:50%;background:#1E8E3E}
.conv-liste{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto}
.conv-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--filet);border-radius:var(--r-m);background:#fff;cursor:pointer;text-align:left}
.conv-item:hover,.conv-item.active{border-color:var(--bleu);background:var(--bleu-brume)}
.conv-item .cellule{flex:1;min-width:0}
.conv-item .apercu{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;color:var(--gris)}

.barre-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 15px;
  background:var(--bleu-papier);border:1px solid var(--filet);
  border-radius:var(--r-s);margin-bottom:12px}
.barre-actions .titre{font-weight:600;font-size:.86rem;margin-right:auto}

.etat-decl{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border:1px solid var(--filet);border-radius:var(--r-m);background:#fff;margin-bottom:12px;
  border-left:3px solid var(--filet-fort)}
.etat-decl .puce{width:36px;height:36px;border-radius:var(--r-xs);display:grid;
  place-items:center;flex-shrink:0}
.puce-attente{background:var(--orange-pale);color:var(--orange)}
.puce-valide{background:var(--vert-pale);color:var(--vert)}
.puce-rejete{background:var(--rouge-pale);color:var(--rouge)}

/* -------------------------------------------------------------------------
   Emblèmes
   ------------------------------------------------------------------------- */
.logo-box{display:inline-grid;place-items:center;flex-shrink:0;position:relative}
.logo-box img{width:100%;height:100%;object-fit:contain}
.medaillon{border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 1px var(--filet-fort);line-height:1}
.cc-logo{width:54px;height:54px;flex-shrink:0}
.detail-logo{width:80px;height:80px}

/* -------------------------------------------------------------------------
   Veille
   ------------------------------------------------------------------------- */
.sync-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;
  border-radius:var(--r-xs);background:var(--vert-pale);color:var(--vert);
  font-size:.75rem;font-weight:600}
.sync-pill .dot{background:var(--vert)}
.sync-pill.stale{background:var(--orange-pale);color:#9C4A0B}
.sync-pill.stale .dot{background:var(--orange)}
.source-row{display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--filet)}
.source-row:last-child{border-bottom:0}
.source-state{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.state-ok{background:var(--vert)}
.state-warn{background:var(--orange)}
.state-err{background:var(--rouge)}

/* -------------------------------------------------------------------------
   Back-office
   ------------------------------------------------------------------------- */
.admin-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.admin-side{background:var(--bleu-nuit);color:rgba(255,255,255,.68);padding:20px 12px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .logo{color:#fff;margin-bottom:24px;padding-left:6px;font-size:1.1rem}
.admin-side .logo-mark{background:#fff;color:var(--bleu-nuit)}
.admin-side .logo small{color:rgba(255,255,255,.5)}
.admin-side h6{font-size:.65rem;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.36);margin:20px 0 6px;padding-left:12px;font-weight:700}
.admin-side a{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:var(--r-xs);color:rgba(255,255,255,.72);font-size:.87rem;
  font-weight:500;cursor:pointer}
.admin-side a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.admin-side a.active{background:var(--bleu-vif);color:#fff;font-weight:600}
.admin-main{background:var(--fond);min-width:0}
.admin-top{background:#fff;border-bottom:1px solid var(--filet);padding:0 26px;height:68px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.admin-body{padding:26px}
.kpi{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:19px;
  border-left:3px solid var(--orange)}
.kpi small{color:var(--gris);font-size:.79rem;font-weight:500}
.kpi b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:700;
  color:var(--encre);margin:5px 0 3px}
.kpi .trend{font-size:.76rem;font-weight:600}
.trend.up{color:var(--vert)}
.trend.down{color:var(--rouge)}
.bar-chart{display:flex;align-items:flex-end;gap:12px;height:180px;padding-top:10px;
  margin-bottom:26px}
.bar{flex:1;background:var(--bleu);border-radius:var(--r-xs) var(--r-xs) 0 0;
  position:relative;min-height:4px;transition:background var(--t)}
.bar:hover{background:var(--orange)}
.bar span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;
  font-size:.72rem;color:var(--gris)}

/* -------------------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------------------- */
.muted{color:var(--gris)}
.small{font-size:.86rem}
.xsmall{font-size:.77rem}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}.mt4{margin-top:36px}
.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px}.mb4{margin-bottom:36px}
.flex{display:flex}.between{justify-content:space-between}.items-center{align-items:center}
.gap1{gap:8px}.gap2{gap:16px}.gap3{gap:24px}
.wrap{flex-wrap:wrap}
.section-head{max-width:640px;margin-bottom:34px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--gris);font-size:1rem;margin:0}
/* Ancien nom du sur-titre, conserve pour les pages non encore reprises */
.eyebrow{display:inline-block;font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);
  padding-bottom:7px;border-bottom:2px solid var(--orange);margin-bottom:16px}
.hero .eyebrow{color:#9FBEEB}

/* Le filet de gauche a laisse place a un cadre complet et a des coins
   arrondis des deux cotes : c'est le dessin commun des encadres. */
.divider-note{background:var(--bleu-papier);border:1px solid #D8E3F3;
  padding:15px 18px;border-radius:12px;
  font-size:.88rem;color:var(--encre-2)}
.note-warn{background:#FFF9F2;border-color:#F2DCC2}
/* Une bonne nouvelle a droit à sa couleur : le paiement instantané ouvre
   l'accès sans attendre, et cela doit se voir au premier coup d'œil. */
.note-ok{background:#EAF6EE;border-color:#CBE5D4;border-left-color:#1B7A46}
.empty{text-align:center;padding:56px 20px;color:var(--gris-clair)}
.empty .ico{color:var(--filet-fort);margin-bottom:12px}
.empty h3{color:var(--encre-2)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}

/* -------------------------------------------------------------------------
   Inscription : choix du canal, indicatif, vérification
   ------------------------------------------------------------------------- */
.bascule-canal{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--filet);border-radius:var(--r-s);overflow:hidden}
.bascule-canal button{padding:11px 8px;border:0;background:#fff;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--gris)}
.bascule-canal button+button{border-left:1px solid var(--filet)}
.bascule-canal button:hover{background:var(--bleu-brume);color:var(--bleu)}
.bascule-canal button.actif{background:var(--bleu);color:#fff}

.ligne-tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.ligne-tel select{max-width:172px}

.ligne-calcul{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.calcul-question{background:var(--sable);border:1px solid var(--sable-2);
  border-radius:var(--r-s);padding:11px 16px;font-family:var(--serif);
  font-size:1.12rem;font-weight:700;color:var(--bleu-nuit);white-space:nowrap;
  user-select:none}
@media(max-width:480px){
  .ligne-tel{grid-template-columns:minmax(0,1fr)}
  .ligne-tel select{max-width:none}
}

/* -------------------------------------------------------------------------
   Code QR de paiement
   ------------------------------------------------------------------------- */
.zone-qr{display:flex;gap:16px;align-items:center;background:var(--sable);
  border:1px solid var(--filet);border-radius:var(--r-s);padding:16px}
.qr-cadre{flex:0 0 auto;width:150px;height:150px;background:#fff;padding:8px;
  border:1px solid var(--filet);border-radius:var(--r-xs);display:grid;place-items:center}
.qr-cadre svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.qr-mode{font-size:.86rem;line-height:1.5;color:var(--encre-2)}
.pay-option{display:flex;align-items:center;gap:11px}
@media(max-width:560px){
  .zone-qr{flex-direction:column;text-align:center}
  .qr-cadre{width:190px;height:190px}
}

/* -------------------------------------------------------------------------
   Bandeau des tarifs
   ------------------------------------------------------------------------- */
.bande-tarifs{background:var(--sable);border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);padding:36px 0}
.tarif{display:block;background:#fff;border:1px solid var(--filet);border-radius:6px;
  padding:20px 18px;transition:border-color .16s,transform .16s}
.tarif:hover{border-color:var(--orange);transform:translateY(-2px);text-decoration:none}
.tarif .tarif-quoi{font-family:var(--sans);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--bleu);display:block;margin-bottom:10px}
.tarif .tarif-prix{font-family:var(--serif);font-size:1.85rem;font-weight:600;
  color:var(--bleu-nuit);line-height:1;display:block}
.tarif .tarif-prix small{font-size:.9rem;font-weight:400;margin-left:3px}
.tarif .tarif-quand{display:block;margin-top:8px;font-size:.82rem;color:var(--encre-2);line-height:1.45}
.tarif.tarif-phare{border-left:3px solid var(--orange)}
@media(max-width:640px){
  .bande-tarifs{padding:26px 0}
  .tarif{padding:16px 15px}
  .tarif .tarif-prix{font-size:1.55rem}
  /* Une pastille de filtre tient sur une ligne, un intitulé de filière non.
     Sur petit écran, on autorise le retour à la ligne plutôt que de laisser
     la page déborder. */
  .chip{white-space:normal}
}

/* -------------------------------------------------------------------------
   Adaptations
   ------------------------------------------------------------------------- */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .detail-grid,
  .detail-grid.colonne-360,
  .detail-grid.deux-egales{grid-template-columns:minmax(0,1fr)}
  .sticky-buy{position:static}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--filet)}
  .step:nth-child(2n){border-right:0}
  .admin-shell{grid-template-columns:minmax(0,1fr)}
  .admin-side{position:static;height:auto}
}

@media(max-width:1080px){
  .nav-plus{display:none}
  /* Le panneau s'arrete au bas de la fenetre et defile lui-meme. Sans
     max-height il prenait la hauteur de ses quinze entrees, debordait de
     l'ecran, et le doigt faisait glisser la page au lieu du menu. */
  .nav{position:fixed;inset:78px 0 auto;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px;gap:0;border-bottom:1px solid var(--filet);
    box-shadow:var(--ombre-m);display:none;
    max-height:calc(100vh - 78px);overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* dvh tient compte de la barre d'adresse, que vh ignore : sans lui, les
     dernieres entrees se cachaient dessous. */
  @supports (height:100dvh){ .nav{max-height:calc(100dvh - 78px)} }
  .nav.open{display:flex}
  /* Menu ouvert : la page dessous ne bouge plus. Un geste commence a cote
     du panneau la faisait defiler sous un menu qui restait en place. */
  body.nav-ouvert{overflow:hidden}
  .nav a{padding:13px;border-bottom:1px solid var(--filet);border-left:2px solid transparent}
  .nav a.active{border-bottom-color:var(--filet);border-left-color:var(--orange)}
  .nav-secondaire{display:flex;flex-direction:column}
  .nav-compte{display:flex;flex-direction:column;margin-top:8px;padding-top:8px;
    border-top:1px solid var(--filet)}
  .nav-compte a{color:var(--bleu);font-weight:700}
  .burger{display:grid;margin-left:auto}
  .header-cta{margin-left:0;padding-left:0;border-left:0}
  .header-cta .btn-ghost{display:none}
}

@media(max-width:1460px){
  .account-grid{grid-template-columns:minmax(0,1fr)}
  .side-nav{position:static;display:flex;overflow-x:auto;gap:2px}
  .side-nav a{white-space:nowrap}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .hero-stat{padding:0 16px}
  .barre-actions .btn{flex:1 1 auto}
}

@media(max-width:640px){
  body{font-size:16px}

  /* Une etiquette porte une information, pas un ornement. Comprimee dans un
     titre etroit, elle etait coupee par ses points de suspension : « 8
     documents » devenait « 8 docu... », « Paiement instantane : voir... »
     ne disait plus rien. Sur un ecran etroit elle passe donc a la ligne
     dans le titre, et son texte se replie plutot que de se faire couper. */
  .panel h3{flex-wrap:wrap}
  .badge{white-space:normal;overflow:visible;text-overflow:clip}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .hero-stat{padding:0 14px}
  .hero-stat:nth-child(odd){padding-left:0;border-left:0}
  .hero-stat b{font-size:1.45rem}
  .searchbar{flex-direction:column;padding:8px}
  .searchbar select{border-left:0;border-top:1px solid var(--filet);max-width:none}
  .searchbar .btn{margin-left:0;margin-top:6px}
  .section{padding:40px 0}
  .panel{padding:20px}

  .etat-decl{flex-wrap:wrap}
  .etat-decl .cellule{flex:1 1 180px}
  .etat-decl>.badge,.etat-decl>div:last-child{flex:1 1 100%;text-align:left}
  .arbo-tete{flex-wrap:wrap;padding:14px}
  .arbo-titre{flex:1 0 150px}
  .arbo-tete .pastille-nb,.arbo-tete .badge{flex:0 0 auto}
  .annee-tete{flex-wrap:wrap}
  .annee-titre{flex:1 0 110px}
  .barre-actions{flex-direction:column;align-items:stretch}
  .barre-actions .titre{margin-right:0;margin-bottom:4px}
  .doc-row{flex-wrap:wrap}
  .doc-row .cellule{flex:1 0 100%;order:-1}
  .doc-row .btn{flex:1 1 40%}
  .source-row{flex-wrap:wrap}
  .source-row .cellule{flex:1 0 100%}
  .modal{padding:12px}
  .modal-head,.modal-body{padding-left:18px;padding-right:18px}
  .numero-marchand{font-size:1.5rem}
}

@media(max-width:520px){
  .header-cta{display:none}
  .header-inner{gap:8px;height:70px}
  .nav{inset-block-start:70px}
  .logo{font-size:1.08rem}
  .logo small{font-size:.56rem}
  .ribbon{font-size:.73rem}
  .ribbon .container{gap:10px}
  .ribbon-sep{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .header,.footer,.ribbon,.btn,.side-nav{display:none!important}
  body{font-size:11pt}
  .panel,.card{border:1px solid #ccc;break-inside:avoid}
}

/* Un montant ne se coupe jamais. Les espaces des fichiers sont deja
   insecables ; cette regle rattrape les prix construits en JavaScript
   et les cartes trop etroites sur telephone. */
.cc-price, .tarif .tarif-prix, .palier .somme, .prix, [data-prix]{
  white-space:nowrap}
.cc-price small, .tarif .tarif-prix small, .palier .somme small{white-space:normal}

/* ---------- Les voies d'un concours : ecoles, cycles, series ----------
   Un accordeon plutot qu'un systeme d'onglets : le contenu reste dans le
   document, donc lisible par Google et par un lecteur d'ecran, et la page
   fonctionne meme si le JavaScript ne se charge pas. */
.voies{display:flex;flex-direction:column;gap:9px}
.voie{border:1px solid var(--filet);border-radius:6px;background:#fff;overflow:hidden}
.voie[open]{border-color:var(--bleu);box-shadow:0 1px 0 rgba(11,60,141,.08)}
.voie > summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.voie > summary::-webkit-details-marker{display:none}
.voie > summary:hover{background:var(--bleu-brume)}
.voie[open] > summary{background:var(--bleu-brume);border-bottom:1px solid var(--filet)}
.voie-code{flex:0 0 auto;min-width:62px;text-align:center;padding:4px 9px;border-radius:4px;
  background:var(--bleu-nuit);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.voie-nom{flex:1 1 200px;font-weight:600;font-size:.95rem;color:var(--encre)}
.voie-acces{flex:0 0 auto;font-size:.8rem;color:var(--encre-2)}
.voie-corps{padding:15px 16px 17px}
.voie-bloc{margin-bottom:14px}
.voie-bloc:last-child{margin-bottom:0}
.voie-etiq{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--bleu);margin-bottom:7px}
.voie-note{background:#FFF9F2;border:1px solid #F2DCC2;border-radius:10px;
  padding:10px 13px;font-size:.87rem;line-height:1.55;color:var(--encre-2)}
.chip-sm{font-size:.76rem;padding:3px 9px}
@media(max-width:640px){
  .voie > summary{padding:11px 12px;gap:9px}
  .voie-acces{flex-basis:100%;margin-left:74px;margin-top:-4px}
  .voie-corps{padding:13px 13px 15px}
}

/* Jauge horizontale du back-office : part d'une source, d'un appareil.
   Volontairement sobre, elle doit se lire d'un coup d'oeil. */
.jauge{height:7px;border-radius:4px;background:var(--bleu-brume);overflow:hidden}
.jauge span{display:block;height:100%;background:var(--bleu);border-radius:4px}
.jauge.orange span{background:var(--orange)}

/* Le graphique journalier peut porter quarante barres : sur telephone,
   les etiquettes deviennent illisibles, on les masque plutot que de les
   laisser se chevaucher. */
@media(max-width:640px){
  .bar-chart{gap:4px;height:150px}
  .bar span{display:none}
}

/* -------------------------------------------------------------------------
   Espace client : la barre laterale rangee par groupes
   -------------------------------------------------------------------------
   Le client doit voir d'un coup ce qui releve de son compte et ce qui releve
   de ce qu'il a paye. Les titres de groupe separent, ils ne crient pas : ils
   restent plus discrets que les entrees qu'ils annoncent. */
.side-nav .nav-titre{display:block;padding:10px 13px 5px;font-family:var(--serif);
  font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris)}
.side-nav .nav-titre:first-child{padding-top:4px}
.side-nav .nav-sep{display:block;height:1px;margin:9px 13px;background:var(--filet)}

/* Le lien vers le reste du catalogue : present, jamais insistant. */
.side-nav a.nav-offres{color:var(--gris);font-weight:600;font-size:.84rem}
.side-nav a.nav-offres:hover{background:var(--bleu-papier);color:var(--orange)}
.side-nav a.nav-offres .ico{opacity:.75}

/* Sous 1460px la barre devient une bande horizontale qui defile : les titres
   se rangent alors dans la file, sans jamais se comprimer, et les filets
   verticaux disparaissent. */
@media(max-width:1460px){
  .side-nav{align-items:center}
  .side-nav .nav-titre{flex:0 0 auto;padding:6px 12px 6px 6px;white-space:nowrap}
  .side-nav .nav-sep{display:none}
  .side-nav a{flex:0 0 auto}
}

/* ------------------------------------------------- Bandeau de consentement
   Il se pose en bas, ne masque jamais le contenu au point d'empecher de
   lire, et donne aux deux reponses la meme importance visuelle : refuser
   doit etre aussi simple qu'accepter, sinon le consentement ne vaut rien.
   Sur telephone, les deux boutons passent en pleine largeur, l'un au-dessus
   de l'autre, et le refus reste le premier. */
#bandeau-consentement{position:fixed;left:0;right:0;bottom:0;z-index:2200;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 22px;background:#fff;border-top:2px solid var(--bleu);
  box-shadow:0 -6px 24px rgba(4,30,66,.16)}
#bandeau-consentement .consent-texte{flex:1 1 320px;font-size:.86rem;line-height:1.5;
  color:var(--gris-fonce,#333)}
#bandeau-consentement .consent-texte a{color:var(--bleu);text-decoration:underline}
#bandeau-consentement .consent-boutons{display:flex;gap:10px;flex:0 0 auto}
#bandeau-consentement .consent-boutons .btn{min-width:130px}

@media(max-width:640px){
  #bandeau-consentement{padding:14px 16px;gap:12px;
    max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
  #bandeau-consentement .consent-boutons{flex:1 1 100%;flex-direction:column}
  #bandeau-consentement .consent-boutons .btn{width:100%;min-width:0}
}

/* =========================================================================
   LA CAPSULE WHATSAPP
   -------------------------------------------------------------------------
   Elle se pose en bas a droite, au-dessus du contenu mais SOUS le bandeau
   de consentement et sous les fenetres modales : rien ne doit jamais
   recouvrir un choix a faire.

   Sur telephone, elle se reduit a sa pastille : un rectangle de texte
   flottant sur un ecran de 360 pixels mange la moitie de la page, et c'est
   justement la que l'on lit le plus. Elle remonte aussi un peu, pour ne pas
   se poser sur les boutons d'achat colles en bas.
   ========================================================================= */
.capsule-wa{position:fixed;right:18px;bottom:18px;z-index:1900;
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 17px 11px 13px;border-radius:999px;
  background:#25D366;color:#062e14;text-decoration:none;
  box-shadow:0 8px 24px rgba(4,30,66,.24);
  transition:transform .15s ease,box-shadow .15s ease}
.capsule-wa:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(4,30,66,.3)}
.capsule-wa:focus-visible{outline:3px solid var(--bleu,#0B3C8D);outline-offset:3px}
.capsule-wa-ico{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.28);flex:0 0 auto}
.capsule-wa-texte{display:flex;flex-direction:column;line-height:1.25}
.capsule-wa-texte b{font-size:.88rem;font-weight:700}
.capsule-wa-texte span{font-size:.79rem;opacity:.85}

@media(max-width:640px){
  .capsule-wa{right:14px;bottom:84px;padding:12px;gap:0}
  .capsule-wa-texte{display:none}
  .capsule-wa-ico{width:30px;height:30px;background:none}
}

/* Le bandeau de consentement occupe le bas de l'ecran tant qu'on n'a pas
   repondu : la capsule s'efface derriere lui plutot que de le chevaucher. */
body:has(#bandeau-consentement) .capsule-wa{bottom:auto;top:auto;
  transform:translateY(-118px)}
@media(max-width:640px){
  body:has(#bandeau-consentement) .capsule-wa{transform:none;bottom:200px}
}

/* L'etoile des champs obligatoires. Dans le formulaire d'inscription ils le
   sont tous : l'etoile ne distingue pas, elle previent, et c'est la date de
   naissance qu'on veut voir marquee avant tout. */
.field label .oblig{color:var(--rouge,#c0392b);font-weight:700;margin-left:2px}
.field .input:invalid:not(:placeholder-shown){border-color:var(--rouge,#c0392b)}

/* ---- Afficher le mot de passe saisi -------------------------------------
   Un champ masque se retape de travers, surtout sur un telephone. L'oeil
   rend la saisie visible le temps de la relire. Le bouton est pose par
   app.js sur CHAQUE champ de mot de passe du site, y compris ceux que le
   back-office cree a la volee : il n'y a donc rien a ajouter dans les
   gabarits. */
.mdp-enveloppe{position:relative;display:block;width:100%}
.mdp-enveloppe>.input{padding-right:46px}
.mdp-oeil{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:transparent;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--encre-2,#5F6B7A);
  border-radius:8px}
.mdp-oeil:hover{background:var(--bleu-pale,#EDF3FC);color:var(--bleu,#0B3C8D)}
.mdp-oeil:focus-visible{outline:2px solid var(--bleu,#0B3C8D);outline-offset:1px}
.mdp-oeil svg{display:block;width:19px;height:19px}

/* ---- Les encadrés de remarque ------------------------------------------
   Un bandeau beige a filet gauche faisait « bloc genere ». Ici l'encadre a
   une vraie tete : une pastille d'icone, un intitule court en capitales
   douces, puis le texte. L'oeil sait tout de suite s'il s'agit d'une mise
   en garde, d'un bon conseil ou d'une simple precision, et le texte garde
   sa place entiere. */
.encadre{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;
  padding:15px 17px;border-radius:12px;margin:14px 0;font-size:.91rem;line-height:1.6;
  border:1px solid transparent}
.encadre>.ico-pastille{width:30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;flex:none}
.encadre>.ico-pastille svg{width:17px;height:17px;display:block}
.encadre .titre{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:3px 0 5px}
.encadre p{margin:0 0 .5em}
.encadre p:last-child{margin-bottom:0}
.encadre ul{margin:.3em 0 0;padding-left:1.05em}

.encadre.garde{background:#FFF9F2;border-color:#F2DCC2}
.encadre.garde>.ico-pastille{background:#FBE4CB;color:#8F4409}
.encadre.garde .titre{color:#8F4409}

.encadre.bon{background:#F4FBF7;border-color:#CFE8DA}
.encadre.bon>.ico-pastille{background:#DCF0E5;color:#15673D}
.encadre.bon .titre{color:#15673D}

.encadre.info{background:#F7FAFE;border-color:#D8E3F3}
.encadre.info>.ico-pastille{background:#E3EDFB;color:#0B3C8D}
.encadre.info .titre{color:#0B3C8D}

@media(max-width:520px){
  .encadre{grid-template-columns:1fr;gap:9px}
  .encadre>.ico-pastille{display:none}
}

/* ---- Les anciens encadres, ramenes au nouveau dessin --------------------
   Trente-six encadres etaient repartis sur quatre pages sous sept noms de
   classe differents, tous dans l'ancien habillage : un bandeau plat a filet
   gauche, qui faisait « bloc genere ».

   Plutot que de reecrire trente-six appels, et d'en oublier, on redessine
   les classes elles-memes. Toute page qui les emploie, aujourd'hui ou
   demain, herite du nouveau dessin sans qu'on y touche.

   La pastille d'icone est posee en ::before, en position absolue : cela
   fonctionne quel que soit le contenu, un paragraphe seul comme un bloc a
   plusieurs enfants, ce qu'une grille ne garantissait pas. */

.b-note, .v-note, .p-attention, .m-attention,
.b-bon, .p-bon, .v-verdict {
  position: relative;
  padding: 15px 17px 15px 56px;
  border-radius: 12px;
  border: 1px solid transparent;
  border-left-width: 1px;
  margin: 14px 0;
  font-size: .91rem;
  line-height: 1.6;
}
.b-note::before, .v-note::before, .p-attention::before, .m-attention::before,
.b-bon::before, .p-bon::before, .v-verdict::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

/* Les mises en garde */
.b-note, .v-note, .p-attention, .m-attention {
  background: #FFF9F2;
  border-color: #F2DCC2;
  color: inherit;
}
.b-note::before, .v-note::before, .p-attention::before, .m-attention::before {
  background-color: #FBE4CB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F4409' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 3.9 2.4 17.4A2 2 0 0 0 4.1 20.4h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

/* Les bonnes nouvelles et les verdicts */
.b-bon, .p-bon, .v-verdict {
  background: #F4FBF7;
  border-color: #CFE8DA;
}
.b-bon::before, .p-bon::before, .v-verdict::before {
  background-color: #DCF0E5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315673D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* L'alerte d'une cabine : plus discrete, elle vit DANS une fiche de
   compagnie et ne doit pas peser autant qu'un encadre de page. */
.v-cab-alerte {
  background: #FFF9F2;
  border: 1px solid #F2DCC2;
  border-radius: 10px;
  padding: 9px 12px;
}

@media (max-width: 520px) {
  .b-note, .v-note, .p-attention, .m-attention,
  .b-bon, .p-bon, .v-verdict { padding: 13px 14px; }
  .b-note::before, .v-note::before, .p-attention::before, .m-attention::before,
  .b-bon::before, .p-bon::before, .v-verdict::before { display: none; }
}