/* =============================================================================
   ARDOISE — SITE PUBLIC
   =============================================================================

   TROIS PAGES, UNE FEUILLE
   ------------------------
   index.html, tarifs.html et services.html partagent tout : la grille, les
   cartes, les tableaux, le mode sombre. Les styles vivaient jusqu'ici dans une
   balise <style> de 1 100 lignes recopiée dans chaque page — trois vérités qui
   divergent dès la première retouche.

   L'IDÉE VISUELLE
   ---------------
   Une ardoise et de la craie. Le mode clair est le papier du cahier, réglé de
   lignes horizontales ; le mode sombre est le tableau noir de la classe. Ce
   n'est pas une métaphore décorative : c'est le nom du produit, et c'est le
   seul objet que partagent toutes les écoles à qui il s'adresse.

   Les prix et les chiffres sont composés en IBM Plex Mono. Un tarif est une
   écriture de registre, pas un titre.

   ACCESSIBILITÉ
   -------------
   Focus visible partout, contrastes tenus dans les deux modes, et
   `prefers-reduced-motion` respecté — une école se consulte souvent depuis un
   téléphone d'entrée de gamme où les animations coûtent cher.
   ============================================================================= */

/* ------------------------------------------------------------------ Jetons */

:root {
  /* Papier et craie */
  --craie:        #F6F2E7;
  --craie-2:      #FBF9F3;
  --craie-3:      #EFEADB;

  /* Ardoise */
  --ardoise:      #1F2B24;
  --ardoise-2:    #263129;
  --ardoise-3:    #141C18;

  /* Accents */
  --ocre:         #C98A3E;
  --ocre-fonce:   #A96F2E;
  --ocre-clair:   #F0DDBB;
  --encre:        #3C5A62;
  --prune:        #6B4E9E;
  --rouge:        #B23A2E;
  --vert:         #3F6B4A;

  /* Rôles */
  --fond:         var(--craie);
  --fond-2:       var(--craie-2);
  --fond-3:       var(--craie-3);
  --texte:        #1F2B24;
  --texte-att:    #6B7269;
  --bordure:      #E4DFCF;
  --bordure-forte:#D3CCB7;
  --accent:       var(--ocre);
  --accent-texte: #7A4E17;
  --ligne-cahier: rgba(31, 43, 36, 0.045);
  --ombre:        0 1px 2px rgba(31,43,36,.05), 0 8px 24px -12px rgba(31,43,36,.16);
  --ombre-forte:  0 2px 4px rgba(31,43,36,.06), 0 24px 48px -20px rgba(31,43,36,.28);

  --police-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --police-corps: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-data:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-carte: 14px;
  --r-bouton: 10px;
  --largeur: 1120px;
}

/* Mode sombre : le tableau de la classe. Déclenché par la préférence système
   ET par un attribut, pour que le sélecteur du site puisse forcer un mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond:          var(--ardoise-3);
    --fond-2:        var(--ardoise);
    --fond-3:        var(--ardoise-2);
    --texte:         #EDEADF;
    --texte-att:     #9CA79E;
    --bordure:       #2E3B33;
    --bordure-forte: #3D4C43;
    --accent:        #E0A65C;
    --accent-texte:  #E8BE84;
    --ligne-cahier:  rgba(246, 242, 231, 0.035);
    --ombre:         0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --ombre-forte:   0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.65);
  }
}
:root[data-theme="sombre"] {
  --fond:          var(--ardoise-3);
  --fond-2:        var(--ardoise);
  --fond-3:        var(--ardoise-2);
  --texte:         #EDEADF;
  --texte-att:     #9CA79E;
  --bordure:       #2E3B33;
  --bordure-forte: #3D4C43;
  --accent:        #E0A65C;
  --accent-texte:  #E8BE84;
  --ligne-cahier:  rgba(246, 242, 231, 0.035);
  --ombre:         0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --ombre-forte:   0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------------- Socle */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--texte); color: var(--fond);
  padding: 12px 20px; border-radius: var(--r-bouton); z-index: 100;
}
.saut-contenu:focus { left: 16px; top: 16px; }

/* ------------------------------------------------------------- Typographie */

h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 600; line-height: 1.15; }

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }

.accent { color: var(--accent-texte); }

.eyebrow {
  font-family: var(--police-data);
  font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--texte-att);
}

.chapeau {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--texte-att); max-width: 62ch;
}

/* ------------------------------------------------------------------ Entête */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
/* LE SÉLECTEUR EST UN ENFANT DIRECT, ET C'EST ESSENTIEL.

   Écrit `.entete .conteneur`, il visait TOUT `.conteneur` situé sous l'en-tête
   — donc aussi celui du panneau mobile, qui est un frère de cette barre à
   l'intérieur du même <header>. Le panneau se retrouvait en `display: flex`
   sur une hauteur imposée de 66 px : ses sections « Produit », « Tarifs »,
   « Services » se rangeaient côte à côte au lieu de l'une sous l'autre,
   débordaient à droite, et l'ensemble était rogné à la hauteur d'une barre de
   titre. C'est le menu « vraiment bizarre » constaté au doigt.

   Le combinateur `>` limite la règle à la barre elle-même ; le panneau
   redevient un bloc ordinaire. */
.entete > .conteneur {
  display: flex; align-items: center; gap: 8px;
  height: 66px;
}
.marque {
  font-family: var(--police-titre); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -0.02em; margin-right: auto;
}
.nav-site { display: flex; align-items: center; gap: 4px; }
.nav-site a {
  padding: 8px 13px; border-radius: var(--r-bouton);
  font-size: .92rem; color: var(--texte-att);
  transition: color .15s, background .15s;
}
.nav-site a:hover { color: var(--texte); background: var(--fond-3); }
.nav-site a[aria-current="page"] { color: var(--texte); font-weight: 500; }

@media (max-width: 860px) {
  .nav-site a.masquer-mobile { display: none; }
}

/* ------------------------------------------------------------------ Boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-bouton);
  font-family: var(--police-corps); font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .15s;
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton.principal { background: var(--texte); color: var(--fond); box-shadow: var(--ombre); }
.bouton.principal:hover { box-shadow: var(--ombre-forte); }

.bouton.ocre { background: var(--ocre); color: #2A1B06; box-shadow: var(--ombre); }
.bouton.ocre:hover { background: var(--ocre-fonce); color: #FFF6E6; }

.bouton.secondaire { background: transparent; color: var(--texte); border-color: var(--bordure-forte); }
.bouton.secondaire:hover { background: var(--fond-3); }

.bouton.petit { padding: 9px 16px; font-size: .87rem; }
.bouton.pleine-largeur { width: 100%; }

/* ------------------------------------------------------------------ Sections */

.section { padding: 84px 0; }
.section.serree { padding: 56px 0; }
.section.alt { background: var(--fond-2); border-block: 1px solid var(--bordure); }

.section-entete { max-width: 62ch; margin-bottom: 44px; }
.section-entete .eyebrow { display: block; margin-bottom: 12px; }
.section-entete h2 + p { margin-top: 14px; }

@media (max-width: 700px) { .section { padding: 56px 0; } }

/* Le papier réglé du cahier. Signature visuelle du site : elle revient sur le
   hero et sur les blocs qui parlent de l'école, jamais ailleurs. */
.regle { position: relative; overflow: hidden; }
.regle::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 31px, var(--ligne-cahier) 31px 32px);
}
.regle > * { position: relative; }

/* ------------------------------------------------------------------ Hero */

.hero { padding: 76px 0 60px; }
.hero .grille {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero .chapeau { margin-bottom: 28px; }
.groupe-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.mention-cta { font-size: .87rem; color: var(--texte-att); }

@media (max-width: 900px) {
  .hero { padding: 48px 0 40px; }
  .hero .grille { grid-template-columns: 1fr; gap: 36px; }
}

/* Vignette « deux étages » : l'idée commerciale centrale, dessinée. */
.etages { display: grid; gap: 14px; }
.etage {
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); padding: 18px 20px; box-shadow: var(--ombre);
}
.etage .titre {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem;
}
.etage .rythme {
  font-family: var(--police-data); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-att);
  border: 1px solid var(--bordure-forte); border-radius: 999px; padding: 2px 8px;
}
.etage p { font-size: .9rem; color: var(--texte-att); margin-top: 6px; }
.etage.abonnement { border-left: 3px solid var(--ocre); }
.etage.services   { border-left: 3px solid var(--encre); }
.etages .plus {
  text-align: center; font-family: var(--police-data);
  color: var(--texte-att); font-size: .8rem;
}

/* ------------------------------------------------------------------ Bandeau */

.bandeau {
  border-block: 1px solid var(--bordure); background: var(--fond-2);
}
.bandeau .conteneur {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 26px;
}
.bandeau .chiffre {
  font-family: var(--police-data); font-size: 1.4rem; font-weight: 500; color: var(--accent-texte);
}
.bandeau .libelle { font-size: .84rem; color: var(--texte-att); line-height: 1.4; }
@media (max-width: 760px) { .bandeau .conteneur { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ Grilles */

.grille-cartes {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.carte {
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); padding: 26px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.carte:hover { border-color: var(--bordure-forte); transform: translateY(-2px); box-shadow: var(--ombre); }
.carte h3 { margin-bottom: 8px; }
.carte p { color: var(--texte-att); font-size: .94rem; }

/* Problème → réponse. Le libellé du problème est en tête, en petit : c'est ce
   que le directeur reconnaît, la fonctionnalité vient après. */
.carte .probleme {
  font-family: var(--police-data); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-texte); display: block; margin-bottom: 10px;
}

/* ------------------------------------------------------------------ Tarifs */

.selecteur-periode {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--fond-3); border: 1px solid var(--bordure);
  border-radius: 999px; margin-bottom: 10px;
}
.selecteur-periode button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--police-corps); font-size: .88rem; font-weight: 500;
  color: var(--texte-att); padding: 9px 20px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.selecteur-periode button[aria-pressed="true"] {
  background: var(--fond); color: var(--texte); box-shadow: var(--ombre);
}
.note-periode { font-size: .86rem; color: var(--texte-att); min-height: 1.4em; }

.grille-offres {
  display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) { .grille-offres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille-offres { grid-template-columns: 1fr; } }

/* Offres dépubliées depuis l'espace Super Admin.
   ---------------------------------------------------------------------------
   `catalogue.js` masque la carte et écrit ici le nombre de cartes restantes.
   Sans ces règles, la grille garderait ses quatre colonnes et laisserait un
   vide à droite, à l'endroit exact de l'offre retirée.

   Deux détails de mise en cascade, tous deux nécessaires :
     · le bloc est borné à `min-width: 1081px` pour ne pas écraser les grilles
       à deux puis une colonne des petits écrans, qu'un sélecteur plus
       spécifique gagnerait quel que soit l'ordre des règles ;
     · la variante `.compacte` (page d'accueil) est nommée explicitement, sa
       propre règle à quatre colonnes étant déclarée plus bas dans la feuille. */
@media (min-width: 1081px) {
  .grille-offres[data-visibles="3"],
  .grille-offres.compacte[data-visibles="3"] { grid-template-columns: repeat(3, 1fr); }
  .grille-offres[data-visibles="2"],
  .grille-offres.compacte[data-visibles="2"] { grid-template-columns: repeat(2, 1fr); }
  .grille-offres[data-visibles="1"],
  .grille-offres.compacte[data-visibles="1"] {
    grid-template-columns: minmax(0, 380px); justify-content: center;
  }
}

.offre {
  display: flex; flex-direction: column;
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); padding: 24px 22px; position: relative;
}
.offre.mise-en-avant {
  border-color: var(--ocre); box-shadow: var(--ombre-forte);
}
.offre .badge {
  position: absolute; top: -11px; left: 22px;
  font-family: var(--police-data); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; background: var(--ocre); color: #2A1B06;
  padding: 4px 10px; border-radius: 999px;
}
.offre .nom { font-family: var(--police-titre); font-size: 1.24rem; font-weight: 600; }
.offre .positionnement {
  font-size: .82rem; color: var(--accent-texte); margin-top: 2px; margin-bottom: 16px;
}
.offre .prix {
  font-family: var(--police-data); font-size: 2.05rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
}
.offre .prix .devise { font-size: 1.05rem; vertical-align: super; margin-right: 2px; }

/* La périodicité, accolée au montant.
   ---------------------------------------------------------------------------
   Le grand chiffre est désormais le TOTAL de la période choisie — 300 $ pour
   l'annuel, plus son équivalent mensuel. Sans ce suffixe, « 300 » et « 30 »
   se liraient de la même façon, et la carte annuelle passerait pour dix fois
   plus chère au lieu de deux mois moins chère.

   Volontairement plus petit et moins contrasté que le montant : il qualifie
   le chiffre, il ne le concurrence pas. */
.offre .prix .periode-prix {
  font-size: .42em;
  font-weight: 500;
  color: var(--texte-att);
  margin-left: 6px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.offre .par-mois { font-size: .84rem; color: var(--texte-att); margin-top: 8px; }
.offre .facturation {
  font-size: .82rem; color: var(--texte-att); margin-top: 4px; min-height: 2.6em;
}
.offre .economie {
  display: inline-block; margin-top: 8px;
  font-family: var(--police-data); font-size: .72rem;
  color: var(--vert); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px;
}
:root[data-theme="sombre"] .offre .economie,
:root:not([data-theme="clair"]) .offre .economie { }
.offre .cible {
  font-size: .86rem; color: var(--texte-att);
  border-top: 1px solid var(--bordure); margin-top: 18px; padding-top: 16px;
}
.offre ul { margin: 16px 0 22px; display: grid; gap: 9px; }
.offre li {
  font-size: .89rem; display: grid; grid-template-columns: 16px 1fr; gap: 9px;
  align-items: start; line-height: 1.45;
}
.offre li::before { content: '✓'; color: var(--accent-texte); font-size: .85rem; line-height: 1.6; }
.offre li.herite::before { content: '↳'; color: var(--texte-att); }
.offre .limites {
  font-family: var(--police-data); font-size: .74rem; color: var(--texte-att);
  display: grid; gap: 4px; margin-bottom: 20px;
}
.offre .bouton { margin-top: auto; }

/* Liste d'avantages en dehors d'une carte d'offre — page d'essai gratuit.
   Reprend la coche de `.offre li` plutôt que d'inventer une puce : c'est le
   même geste de lecture, il doit produire le même signe.

   Le contenu de chaque `li` DOIT être enveloppé dans un `span` unique. Dans
   une grille `18px 1fr`, chaque enfant devient un élément de grille : un
   `<strong>` laissé nu au milieu du texte formerait une troisième colonne et
   le reste de la phrase se retrouverait empilé lettre à lettre sous la coche.
   `.offre li` n'a pas ce besoin parce que son contenu est du texte brut. */
.liste-avantages { margin: 20px 0 0; display: grid; gap: 10px; list-style: none; padding: 0; }
.liste-avantages li {
  font-size: .95rem; display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; line-height: 1.5;
}
.liste-avantages li::before { content: '✓'; color: var(--accent-texte); font-weight: 600; }

/* --------------------------------------------------------------- Comparatif */

.enveloppe-tableau {
  overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2);
  /* Sur mobile le tableau défile ; l'ombre latérale le signale sans texte. */
  background-image:
    linear-gradient(to right, var(--fond-2) 30%, transparent),
    linear-gradient(to left,  var(--fond-2) 30%, transparent);
  background-position: left center, right center;
  background-repeat: no-repeat; background-size: 24px 100%, 24px 100%;
  background-attachment: local, local;
}
table.comparatif { width: 100%; border-collapse: collapse; min-width: 660px; font-size: .89rem; }
table.comparatif th, table.comparatif td { padding: 12px 14px; text-align: center; }
table.comparatif thead th {
  position: sticky; top: 0; background: var(--fond-3);
  font-family: var(--police-titre); font-size: .95rem; font-weight: 600;
  border-bottom: 1px solid var(--bordure-forte);
}
table.comparatif th[scope="row"] {
  text-align: left; font-weight: 400; color: var(--texte);
  position: sticky; left: 0; background: var(--fond-2); min-width: 240px;
}
table.comparatif tbody tr:nth-child(even) th[scope="row"],
table.comparatif tbody tr:nth-child(even) td { background: var(--fond-3); }
table.comparatif tbody tr.groupe th {
  font-family: var(--police-data); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-att);
  padding-top: 22px; background: var(--fond-2);
}
.oui { color: var(--vert); font-weight: 600; }
.non { color: var(--texte-att); }
.valeur { font-family: var(--police-data); font-size: .82rem; }

/* ------------------------------------------------------------------ Services */

.grille-services { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grille-services { grid-template-columns: 1fr; } }

.service {
  display: flex; flex-direction: column;
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); padding: 26px; border-top: 3px solid var(--encre);
}
.service .tarif {
  font-family: var(--police-data); font-size: 1.55rem; font-weight: 500;
  margin: 12px 0 4px;
}
.service .tarif small { font-size: .8rem; color: var(--texte-att); font-weight: 400; }
.service .rythme-facturation {
  font-family: var(--police-data); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-att);
}
.service p { color: var(--texte-att); font-size: .93rem; margin-top: 10px; }
.service ul { margin: 16px 0 20px; display: grid; gap: 8px; }
.service li {
  font-size: .88rem; display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start;
}
.service li::before { content: '·'; color: var(--encre); font-weight: 700; }
.service .bouton { margin-top: auto; }

/* Rappel de séparation, répété à chaque endroit où les deux étages se croisent */
.rappel-separation {
  border: 1px dashed var(--bordure-forte); border-radius: var(--r-carte);
  padding: 18px 22px; background: var(--fond-3);
  font-size: .93rem; color: var(--texte-att);
}
.rappel-separation strong { color: var(--texte); font-weight: 600; }

/* ---------------------------------------------------------------- Simulateur */

.simulateur {
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); padding: 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
@media (max-width: 760px) { .simulateur { grid-template-columns: 1fr; } }

.simulateur label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: 8px; }
.simulateur .champ { display: flex; gap: 10px; align-items: center; }
.simulateur input[type="number"] {
  font-family: var(--police-data); font-size: 1.05rem;
  padding: 11px 14px; width: 150px;
  border: 1px solid var(--bordure-forte); border-radius: var(--r-bouton);
  background: var(--fond); color: var(--texte);
}
.simulateur input[type="range"] { flex: 1; accent-color: var(--ocre); min-width: 120px; }
.simulateur .resultat {
  text-align: right; border-left: 1px solid var(--bordure); padding-left: 26px;
}
@media (max-width: 760px) {
  .simulateur .resultat { text-align: left; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--bordure); padding-top: 18px; }
}
.simulateur .montant {
  font-family: var(--police-data); font-size: 2.2rem; font-weight: 500; line-height: 1;
}
.simulateur .detail { font-size: .84rem; color: var(--texte-att); margin-top: 8px; }
.simulateur .avertissement { font-size: .8rem; color: var(--texte-att); margin-top: 12px; }

/* ------------------------------------------------------------------ FAQ */

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details {
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-2); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 17px 22px; font-weight: 500; font-size: .98rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--police-data); font-size: 1.2rem;
  color: var(--texte-att); flex: none; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--texte-att); font-size: .94rem; }
.faq details > div p + p { margin-top: 10px; }
.faq-groupe { font-family: var(--police-data); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-att); margin: 26px 0 10px; }
.faq-groupe:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ Contact */

.formulaire { display: grid; gap: 14px; max-width: 560px; }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .formulaire .duo { grid-template-columns: 1fr; } }
.formulaire label { font-size: .87rem; font-weight: 500; display: block; margin-bottom: 6px; }
.formulaire input, .formulaire textarea, .formulaire select {
  width: 100%; font-family: var(--police-corps); font-size: .95rem;
  padding: 11px 13px; border: 1px solid var(--bordure-forte);
  border-radius: var(--r-bouton); background: var(--fond); color: var(--texte);
}
.formulaire textarea { min-height: 100px; resize: vertical; }
.formulaire .aide { font-size: .8rem; color: var(--texte-att); }

/* --------------------------------------------------- Groupes de cases à cocher

   LA CASE À COCHER LARGE DE 534 PIXELS
   ------------------------------------
   La règle `.formulaire input` ci-dessus vise TOUS les `<input>` du
   formulaire — donc aussi les cases à cocher des services. Une case étirée à
   `width: 100%` occupe toute la largeur du formulaire : son libellé est
   repoussé à la ligne suivante, et plus rien n'indique quelle case appartient
   à quel service. C'est le désalignement constaté sur « Nous contacter ».

   Les cases sortent donc de la règle générale, et le groupe reçoit la même
   mise en forme que les autres champs — le `<fieldset>` nu, avec sa bordure
   grise de navigateur et sa légende qui chevauche le trait, était le seul
   élément du site à ne ressembler à rien.
   -------------------------------------------------------------------------- */
.formulaire input[type="checkbox"],
.formulaire input[type="radio"] {
  /* Une taille explicite, et carrée. `width: auto` suffirait à annuler
     l'étirement, mais la couche mobile fixe une hauteur pour la cible
     tactile : la case se retrouverait haute de 19 px et large de 13. */
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: var(--ocre, #c98a3e);
}

.groupe-cases {
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-bouton);
  background: var(--fond);
  padding: 6px 14px 12px;
  margin: 0;
  min-width: 0;
}
.groupe-cases legend {
  font-size: .87rem; font-weight: 500;
  padding: 0 6px;
  color: var(--texte);
}
.case {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: .93rem;
  cursor: pointer;
}
.case + .case { border-top: 1px solid var(--bordure); }
.case span { min-width: 0; }

.message-retour {
  padding: 13px 16px; border-radius: var(--r-bouton); font-size: .9rem;
  border: 1px solid var(--bordure-forte); background: var(--fond-3);
}
.message-retour.succes { border-color: var(--vert); color: var(--vert); }
.message-retour.erreur { border-color: var(--rouge); color: var(--rouge); }

/* ------------------------------------------------------------------ CTA final */

.cta-final {
  background: var(--ardoise); color: var(--craie);
  padding: 76px 0; text-align: center;
}
.cta-final h2 { margin-bottom: 14px; }
.cta-final p { color: rgba(246,242,231,.72); max-width: 56ch; margin: 0 auto 28px; }
.cta-final .bouton.principal { background: var(--ocre); color: #2A1B06; }
.cta-final .bouton.secondaire { color: var(--craie); border-color: rgba(246,242,231,.28); }
.cta-final .bouton.secondaire:hover { background: rgba(246,242,231,.08); }

/* ------------------------------------------------------------------ Pied */

.pied { border-top: 1px solid var(--bordure); padding: 46px 0 34px; background: var(--fond-2); }
.pied .grille {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 34px;
}
@media (max-width: 800px) { .pied .grille { grid-template-columns: 1fr 1fr; } }
.pied h2 {
  font-family: var(--police-data); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-att); margin-bottom: 12px; font-weight: 500;
}
.pied ul { display: grid; gap: 8px; }
.pied a { font-size: .9rem; color: var(--texte-att); }
.pied a:hover { color: var(--texte); }
.pied .bas {
  border-top: 1px solid var(--bordure); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .84rem; color: var(--texte-att);
}
.pied .description { font-size: .9rem; color: var(--texte-att); max-width: 34ch; margin-top: 10px; }

/* ------------------------------------------------------- Bascule de thème */

.bascule-theme {
  border: 1px solid var(--bordure-forte); background: transparent;
  color: var(--texte-att); cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: background .15s, color .15s;
}
.bascule-theme:hover { background: var(--fond-3); color: var(--texte); }

/* ----------------------------------------------------- État de chargement */

[data-etat="chargement"] { opacity: .55; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* =============================================================================
   ARDOISE — SITE MULTI-PAGES
   =============================================================================

   Ce bloc s'ajoute à la feuille d'origine sans rien lui retirer. Il apporte ce
   qu'un site de dix-huit pages exige et qu'une landing unique n'avait pas :

     · une navigation à deux niveaux, utilisable au clavier et au doigt ;
     · un fil d'Ariane, seul repère fiable dans une arborescence ;
     · les composants récurrents des pages dédiées — cartes étoffées, étapes
       numérotées, encarts, maillage interne de bas de page.

   Aucune classe existante n'est redéfinie autrement que pour l'entête, dont la
   structure change réellement (le menu passe de liens plats à sous-menus).
   ============================================================================= */

/* ------------------------------------------------------------ Entête v2 */

.entete > .conteneur { gap: 6px; }

.actions-entete { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lien-connexion {
  padding: 8px 12px; border-radius: var(--r-bouton);
  font-size: .9rem; color: var(--texte-att);
  transition: color .15s, background .15s;
}
.lien-connexion:hover { color: var(--texte); background: var(--fond-3); }

.nav-site { margin-left: 22px; }
.nav-niveau1 { display: flex; align-items: center; gap: 2px; }
.a-sous-menu { position: relative; }

.declencheur {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border: 0; border-radius: var(--r-bouton);
  background: transparent; color: var(--texte-att);
  font-family: inherit; font-size: .92rem; cursor: pointer;
  transition: color .15s, background .15s;
}
.declencheur:hover { color: var(--texte); background: var(--fond-3); }
.a-sous-menu[data-actif="oui"] > .declencheur { color: var(--texte); font-weight: 500; }
.declencheur[aria-expanded="true"] { color: var(--texte); background: var(--fond-3); }

.chevron {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s;
}
.declencheur[aria-expanded="true"] .chevron { transform: rotate(-135deg); margin-top: 2px; }

.sous-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-forte);
  padding: 16px;
  min-width: 320px;
  z-index: 60;
}

/* LA PASSERELLE INVISIBLE

   Les 10 px de `top: calc(100% + 10px)` sont une respiration voulue : le
   panneau ne doit pas coller au bouton. Mais ces 10 px sont du vide, et le vide
   n'appartient à personne. La souris qui descend du déclencheur vers le premier
   lien traverse cette bande, sort du groupe, déclenche `mouseleave`, et le menu
   se referme sous le curseur. D'où l'obligation de viser vite et droit.

   Ce pseudo-élément occupe la bande sans se voir. Il fait partie du sous-menu,
   donc du groupe : la souris ne quitte plus jamais la zone. L'écart visuel
   reste, la coupure disparaît. */
.sous-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
}
.sous-menu[hidden] { display: none; }
.sm-conteneur { display: flex; gap: 26px; }
.sm-colonne { min-width: 250px; }
.sm-titre {
  font-family: var(--police-data); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-att);
  padding: 0 10px 8px;
}
.sous-menu ul { display: grid; gap: 2px; }
.sous-menu a {
  display: block; padding: 9px 10px; border-radius: 9px;
  transition: background .15s;
}
.sous-menu a:hover { background: var(--fond-3); }
.sm-lien { display: block; font-size: .93rem; font-weight: 500; color: var(--texte); }
.sm-note { display: block; font-size: .8rem; color: var(--texte-att); margin-top: 2px; }

/* ------------------------------------------------------- Menu au doigt */

.bascule-menu {
  display: none;
  width: 38px; height: 38px; padding: 10px 8px;
  border: 1px solid var(--bordure); border-radius: var(--r-bouton);
  background: transparent; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.bascule-menu span { display: block; height: 1.5px; background: var(--texte); transition: transform .2s, opacity .2s; }
.bascule-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.panneau-mobile {
  display: none;
  border-top: 1px solid var(--bordure);
  background: var(--fond);
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  padding: 8px 0 28px;
}
.panneau-mobile:not([hidden]) { display: block; }
.bloc-mobile { padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.bloc-mobile h2 {
  font-family: var(--police-data); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-att); margin-bottom: 8px;
}
.bloc-mobile ul { display: grid; gap: 2px; }
.bloc-mobile a { display: block; padding: 10px 0; font-size: 1rem; }
.actions-mobile { display: grid; gap: 10px; margin-top: 20px; }

@media (max-width: 1000px) {
  .nav-site { display: none; }
  .bascule-menu { display: flex; }
  .lien-connexion { display: none; }
}
@media (max-width: 460px) {
  .actions-entete .bouton { display: none; }
}
@media (min-width: 1001px) {
  .panneau-mobile { display: none !important; }
}

/* ---------------------------------------------------------- Fil d'Ariane */

.fil-ariane { padding: 18px 0 0; }
/* La feuille d'origine neutralise les puces des <ul> mais pas des <ol> : le fil
   d'Ariane, qui DOIT être une liste ordonnée pour être compris comme tel,
   héritait donc de la numérotation du navigateur — « 1. Accueil 2. / Tarifs ».
   En display:flex, les marqueurs se superposaient en plus au texte. */
.fil-ariane ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none;
  font-size: .82rem; color: var(--texte-att);
}
.fil-ariane li + li::before { content: '/'; margin-right: 6px; opacity: .55; }
.fil-ariane a:hover { color: var(--texte); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--texte); }

/* ------------------------------------------------------ Hero des pages */

.hero-page { padding: 40px 0 52px; }
.hero-page h1 { margin-bottom: 18px; max-width: 20ch; }
.hero-page .chapeau { max-width: 64ch; }
.hero-page .groupe-cta { margin-top: 26px; }
.hero-page .grille {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: start;
}
@media (max-width: 900px) { .hero-page .grille { grid-template-columns: 1fr; } }
.hero-aparte {
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: var(--r-carte); padding: 22px;
}

/* ----------------------------------------------------------- Grilles */

.grille-cartes.deux  { grid-template-columns: repeat(2, 1fr); }
.grille-cartes.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .grille-cartes.trois { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .grille-cartes.deux, .grille-cartes.trois { grid-template-columns: 1fr; }
}

.grille-deux {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .grille-deux { grid-template-columns: 1fr; gap: 32px; } }

.deux-colonnes-texte {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px;
}
.deux-colonnes-texte h3 { margin-bottom: 8px; }
.deux-colonnes-texte p { color: var(--texte-att); font-size: .95rem; }
@media (max-width: 800px) { .deux-colonnes-texte { grid-template-columns: 1fr; gap: 26px; } }

.apres-grille { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------ Cartes étoffées */

.carte.etoffee { padding: 26px; }
.carte h3 a { text-decoration: none; }
.carte h3 a:hover { color: var(--accent-texte); }
.carte .tarif-carte {
  font-family: var(--police-data); font-size: .92rem; color: var(--accent-texte);
  margin: 2px 0 8px;
}
.mini-liste { display: grid; gap: 7px; margin-top: 12px; }
.mini-liste li {
  position: relative; padding-left: 16px;
  font-size: .91rem; color: var(--texte-att); line-height: 1.55;
}
.mini-liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.mini-liste a { text-decoration: underline; text-underline-offset: 2px; }
.apres-liste { margin-top: 12px; font-size: .88rem; color: var(--texte-att); }
.mention-offre {
  margin-top: 12px; font-family: var(--police-data);
  font-size: .76rem; letter-spacing: .04em; color: var(--accent-texte);
}

.lien-fleche {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: .88rem; font-weight: 500; color: var(--accent-texte);
}
.lien-fleche::after { content: '→'; transition: transform .15s; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------- Listes fortes */

.liste-points { display: grid; gap: 14px; }
.liste-points li {
  position: relative; padding-left: 20px;
  color: var(--texte-att); font-size: .95rem; line-height: 1.6;
}
.liste-points li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent);
}
.liste-points strong { color: var(--texte); font-weight: 600; }
.liste-points a { text-decoration: underline; text-underline-offset: 2px; }

.liste-points.numerotee { counter-reset: etape; }
.liste-points.numerotee li { padding-left: 34px; }
.liste-points.numerotee li::before {
  counter-increment: etape; content: counter(etape);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fond-3); color: var(--texte);
  font-family: var(--police-data); font-size: .74rem;
  display: grid; place-items: center; top: .05em;
}

/* -------------------------------------------------------------- Étapes */

.grille-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .grille-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille-etapes { grid-template-columns: 1fr; } }
.etape {
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--r-carte); padding: 22px;
}
.section.alt .etape { background: var(--fond); }
.etape .num {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fond-3); color: var(--accent-texte);
  font-family: var(--police-data); font-size: .8rem; font-weight: 500;
  margin-bottom: 12px;
}
.etape h3 { font-size: 1.02rem; margin-bottom: 6px; }
.etape p { color: var(--texte-att); font-size: .92rem; }

/* ------------------------------------------------------------- Encarts */

.encart {
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-left: 3px solid var(--ocre);
  border-radius: var(--r-carte); padding: 24px; margin-top: 34px;
}
.section.alt .encart { background: var(--fond); }
.encart h2 { font-size: 1.05rem; margin-bottom: 10px; }
.encart h3 { font-size: 1.05rem; margin-bottom: 10px; }
.encart p { color: var(--texte-att); font-size: .95rem; }
.encart p + p { margin-top: 10px; }
.encart a { text-decoration: underline; text-underline-offset: 2px; }

.encart-offre {
  background: var(--fond-2); border: 1px solid var(--bordure-forte);
  border-radius: var(--r-carte); padding: 22px 24px;
  display: grid; gap: 8px;
}
.encart-offre p { color: var(--texte-att); font-size: .96rem; }
.encart-offre strong { color: var(--texte); }
.liens-encart { font-size: .89rem; }
.liens-encart a { color: var(--accent-texte); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.colonne-aside { display: grid; gap: 18px; }
.colonne-aside .encart { margin-top: 0; }

/* ----------------------------------------------------- Maillage interne */

.titre-maillage {
  font-family: var(--police-data); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-att); font-weight: 500;
  margin-bottom: 18px;
}
.grille-liens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .grille-liens { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille-liens { grid-template-columns: 1fr; } }
.carte-lien {
  display: block; padding: 18px 20px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.carte-lien:hover {
  border-color: var(--bordure-forte); transform: translateY(-2px); box-shadow: var(--ombre);
}
.carte-lien .titre {
  display: block; font-weight: 600; font-size: .96rem; margin-bottom: 5px;
}
.carte-lien .texte { display: block; font-size: .86rem; color: var(--texte-att); line-height: 1.5; }

/* -------------------------------------------------------- Divers pages */

.note-tableau { margin-top: 12px; font-size: .84rem; color: var(--texte-att); max-width: 70ch; }
table.comparatif th a { text-decoration: underline; text-underline-offset: 3px; }
table.comparatif td a, .enveloppe-tableau a { text-decoration: underline; text-underline-offset: 2px; }

.grille-offres.compacte { grid-template-columns: repeat(4, 1fr); }
.grille-offres.compacte .offre { padding: 22px; }
.grille-offres.compacte .prix { margin-top: 10px; }
.grille-offres.compacte .cible { margin: 12px 0 18px; }
@media (max-width: 1080px) { .grille-offres.compacte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille-offres.compacte { grid-template-columns: 1fr; } }

.etage .lien-fleche { margin-top: 10px; font-size: .84rem; }

.section-entete h2 + .chapeau { margin-top: 14px; }
.grille-deux h2 { margin-top: 10px; }
.grille-deux .bouton { margin-top: 22px; }
.grille-deux .chapeau { margin-top: 14px; }

.faq details > div a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 2px; }
.faq details > div ul { display: grid; gap: 7px; margin-top: 10px; }

/* ------------------------------------------------ Guides et contenus éditoriaux */

.conteneur.etroit { max-width: 850px; }
.meta-guide {
  margin-bottom: 8px;
  font-family: var(--police-data); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-texte);
}
.sommaire-guide {
  max-width: 850px; margin: 0 auto 10px; padding: 22px 24px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
}
.sommaire-guide > p {
  margin-bottom: 10px; font-family: var(--police-data); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-att);
}
.sommaire-guide ol { display: grid; gap: 7px; padding-left: 20px; }
.sommaire-guide a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.article-guide .etroit > p { color: var(--texte-att); font-size: 1rem; line-height: 1.75; }
.article-guide .etroit > p + p { margin-top: 16px; }
.article-guide .etroit > h2 { max-width: 25ch; margin-bottom: 20px; }
.article-guide .etroit > .liste-points { margin-top: 24px; }
.article-guide .etroit > .liste-points + p { margin-top: 24px; }
.article-guide a:not(.bouton) { text-decoration: underline; text-underline-offset: 3px; }
.article-guide .carte a, .article-guide .lien-fleche { text-decoration: none; }
.tableau-guide th, .tableau-guide td { min-width: 190px; }
@media (max-width: 620px) {
  .sommaire-guide { margin-inline: 16px; padding: 18px 20px; }
}

/* =============================================================================
   ARDOISE — ILLUSTRATIONS
   =============================================================================

   Les scènes WebP sont réellement détourées : le fond du thème reste visible.
   Elles sont toujours contenues en entier, sans recadrage ni déformation.
   ============================================================================= */

.illus { margin: 0; }

.illus-cadre {
  overflow: visible;
  border: 0;
  background: transparent;
}

.illus-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 18px 24px rgba(31, 42, 36, .12));
}

:root[data-theme="sombre"] .illus-image {
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .34));
}

/* Les cartes tarifaires reçoivent un emblème compact, sans fond ajouté. */
.illustration-offre {
  display: block;
  width: 100%;
  height: 118px;
  margin: 0 auto 14px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 14px rgba(31, 42, 36, .10));
}
:root[data-theme="sombre"] .illustration-offre {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .30));
}
.grille-offres.compacte .illustration-offre { height: 92px; margin-bottom: 10px; }

/* ------------------------------------------------------- Hero de l'accueil */

.colonne-hero { display: grid; gap: 22px; }
.colonne-hero .etages { margin: 0; }

.illus-accueil .illus-cadre {
  border: 0;
  background: none;
}

/* ---------------------------------------------------- Hero des pages filles */

.hero-page .illus-hero { margin-top: 6px; }

/* ------------------------------------------------------------ En-tête illustré */

.entete-illustre {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}
.entete-illustre .section-entete { margin-bottom: 0; }

@media (max-width: 900px) {
  .entete-illustre { grid-template-columns: 1fr; gap: 28px; }
  .illus { max-width: 420px; }
}

/* L'image s'efface sur petit écran pour ne pas repousser les actions utiles. */
@media (max-width: 700px) {
  .illus-hero, .illus-accueil { display: none; }
  .entete-illustre .illus { display: none; }
}

@media print {
  .illus { display: none; }
}