/* ==========================================================================
   Meet Me After School — site du réseau (meetmeafterschool.ma)
   Charte : MMAS-Franchise/11-charte-graphique.md (v1.1)
   Aucune dépendance externe : polices locales, pas de CDN, pas de traceur.
   ========================================================================== */

/* ---------- Polices locales ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/polices/familjen-grotesk-500-700-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/polices/familjen-grotesk-500-700-latin-ext.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/public-sans-400-600-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/public-sans-400-600-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/public-sans-400-italique-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/polices/public-sans-400-italique-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons de la charte ---------- */
:root {
  --marine: #0B246B;
  --azur: #3B7BCA;
  --azur-profond: #2A5FA8;
  --indigo: #454CB5;
  --ciel: #59ADFE;
  --etoile: #F1C834;
  --encre: #1C263D;
  --ardoise: #4C5569;
  --papier: #F7FAFE;
  --brume: #E3EEFB;
  --blanc: #FFFFFF;
  --rouge: #B63132;
  --sur-sombre: #E3EEFB;        /* texte secondaire sur Marine : 12,1:1 */

  --f-titre: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rayon: 18px;
  --rayon-s: 12px;
  --ombre: 0 1px 2px rgba(11, 36, 107, .06), 0 8px 24px rgba(11, 36, 107, .08);
  --largeur: 1160px;
  --gouttiere: 20px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: 1.15;
  color: var(--marine);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
a { color: var(--azur-profond); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--azur-profond);
  outline-offset: 3px;
  border-radius: 4px;
}
.sombre :focus-visible, .pied :focus-visible, .bandeau :focus-visible { outline-color: var(--etoile); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--marine); color: var(--blanc); padding: .7em 1.1em;
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { top: 12px; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
@media (max-width: 480px) { :root { --gouttiere: 16px; } }

/* ---------- Signature et petits éléments ---------- */
.signature {
  font-family: var(--f-texte);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azur-profond);          /* Azur profond sur clair : l'Azur MMAS n'atteint pas 4,5:1 en petit */
  margin: 0 0 1rem;
}
.sombre .signature { color: var(--ciel); }  /* Ciel sur Marine : 5,97:1 */

.surtitre {
  display: inline-block;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azur-profond); margin-bottom: .75rem;
}
.sombre .surtitre { color: var(--ciel); }

.souligne {
  text-decoration: underline;
  text-decoration-color: var(--etoile);
  text-decoration-thickness: .14em;
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
}

.pilule {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
  padding: .3em .85em; border-radius: 999px;
  background: var(--marine); color: var(--blanc);
}
.pilule--etoile { background: var(--etoile); color: var(--encre); }
.pilule--brume { background: var(--brume); color: var(--marine); }

.chapo { font-size: 1.1875rem; color: var(--ardoise); max-width: 62ch; }
.sombre .chapo { color: var(--sur-sombre); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton--etoile { background: var(--etoile); color: var(--marine); }          /* 8,8:1 */
.bouton--etoile:hover { background: #F5D55E; }
.bouton--marine { background: var(--marine); color: var(--blanc); }
.bouton--marine:hover { background: #142F80; }
.bouton--contour { border-color: currentColor; color: var(--marine); background: transparent; }
.bouton--contour:hover { background: var(--brume); }
.sombre .bouton--contour, .bandeau .bouton--contour { color: var(--blanc); }
.sombre .bouton--contour:hover, .bandeau .bouton--contour:hover { background: rgba(255, 255, 255, .1); }
.bouton svg { width: 1.2em; height: 1.2em; flex: none; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (prefers-reduced-motion: reduce) { .bouton, .bouton:hover { transition: none; transform: none; } }

/* ---------- En-tête ---------- */
.entete {
  position: relative; z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--brume);
}
.entete__barre { display: flex; align-items: center; gap: 1.5rem; }
/* Zone de protection du logo : la hauteur de l'étoile (~1/6 du logo) tout autour. */
.entete__logo { flex: none; display: block; padding: 12px 0; }
.entete__logo img { width: 140px; height: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav__liste { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: .4em 0; border-bottom: 3px solid transparent;
}
.nav__liste a:hover { color: var(--azur-profond); }
.nav__liste a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--etoile); }
.nav .bouton { min-height: 44px; padding: .55em 1.2em; font-size: 1rem; }
.menu-bouton { display: none; }

@media (max-width: 960px) {
  .entete__barre { flex-wrap: wrap; gap: 0 1rem; }
  /* Sans JavaScript : la navigation reste visible, en ligne, sous le logo. */
  .nav { width: 100%; margin-left: 0; flex-wrap: wrap; gap: .5rem 1rem; padding-bottom: .75rem; }
  .nav__liste { flex-wrap: wrap; gap: .25rem 1.1rem; }
  /* Avec JavaScript : menu repliable. */
  .js .menu-bouton {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    min-height: 44px; padding: .5em 1em; border-radius: 999px;
    border: 2px solid var(--marine); background: var(--blanc); color: var(--marine);
    font: 700 1rem/1 var(--f-titre); cursor: pointer;
  }
  .menu-bouton svg { width: 20px; height: 20px; }
  .menu-bouton .icone-fermer { display: none; }
  .entete.ouvert .menu-bouton .icone-ouvrir { display: none; }
  .entete.ouvert .menu-bouton .icone-fermer { display: block; }
  .js .nav { display: none; }
  .js .entete.ouvert .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
    padding: .25rem 0 1.25rem; border-top: 1px solid var(--brume);
  }
  .js .entete.ouvert .nav__liste { flex-direction: column; gap: 0; }
  .js .entete.ouvert .nav__liste a { display: block; padding: .8em 0; border-bottom: 1px solid var(--brume); }
  .js .entete.ouvert .nav__liste a[aria-current="page"] { border-bottom: 3px solid var(--etoile); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.section--blanche { background: var(--blanc); }
.section--brume { background: var(--brume); }
.section--serree { padding-top: 0; }
.sombre { background: var(--marine); color: var(--blanc); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--blanc); }
.sombre a:not(.bouton) { color: var(--blanc); }
.section__tete { max-width: 760px; margin-bottom: 2.5rem; }
.section__tete--centre { margin-inline: auto; text-align: center; }
.section__tete--centre .chapo { margin-inline: auto; }
.section__tete .chapo:last-child { margin-bottom: 0; }

/* ---------- Héros ---------- */
.heros { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); position: relative; overflow: hidden; }
.heros__grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; position: relative; }
.heros h1 { margin-bottom: .45em; }
.heros .chapo { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
.heros__devise {
  margin: 1.75rem 0 0; font-family: var(--f-titre); font-weight: 600; letter-spacing: .04em;
  color: var(--sur-sombre); font-size: 1rem;
}
.heros__devise span { color: var(--etoile); padding-inline: .3em; }
.heros__photo { position: relative; margin: 0; }
.heros__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 24px; border: 6px solid var(--blanc);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.heros__photo figcaption { position: absolute; left: 18px; bottom: -14px; }
.heros--page { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.heros--page .heros__grille { grid-template-columns: 1.4fr 1fr; }
.heros--page .heros__grille--seule { grid-template-columns: 1fr; max-width: 820px; }
.heros--page .heros__photo img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .heros__grille, .heros--page .heros__grille { grid-template-columns: 1fr; }
}

/* Petites étoiles décoratives (griffonnages légers de la charte) */
.deco-etoile { position: absolute; width: 26px; height: 26px; color: var(--etoile); pointer-events: none; }
.deco-etoile--1 { top: 10%; right: 46%; }
.deco-etoile--2 { bottom: 8%; left: -6px; width: 16px; height: 16px; opacity: .8; }
@media (max-width: 860px) { .deco-etoile { display: none; } }

/* ---------- Grilles et cartes ---------- */
.grille { display: grid; gap: 1.25rem; }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grille--4, .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; } }

.carte {
  background: var(--blanc); border: 1px solid var(--brume); border-radius: var(--rayon);
  padding: 1.5rem; box-shadow: var(--ombre);
}
.section--blanche .carte { background: var(--papier); box-shadow: none; }
.carte h3 { margin-bottom: .4em; }
.carte p { color: var(--ardoise); }
.carte p:last-child { margin-bottom: 0; }

.pastille {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marine); color: var(--blanc); margin-bottom: 1rem; flex: none;
}
.pastille svg { width: 26px; height: 26px; }

/* Liste à puces cochées */
.coches { list-style: none; padding: 0; margin: 0 0 1em; }
.coches li { position: relative; padding-left: 1.9em; margin-bottom: .6em; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--brume) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A5FA8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.sombre .coches li::before, .carte--marine .coches li::before {
  background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1C834' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Bloc texte + visuel */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo--inverse > :first-child { order: 2; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo--inverse > :first-child { order: 0; } }
.photo-cadre { margin: 0; }
.photo-cadre img { border-radius: var(--rayon); border: 5px solid var(--blanc); box-shadow: var(--ombre); width: 100%; }
.photo-cadre figcaption { font-size: .9rem; color: var(--ardoise); margin-top: .6rem; }
.photo-cadre--petite { max-width: 420px; }

/* Étiquettes (matières, programmes) */
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.etiquettes li { background: var(--brume); color: var(--marine); font-weight: 600; font-size: .9375rem; padding: .35em .9em; border-radius: 999px; }
.sombre .etiquettes li { background: rgba(255, 255, 255, .12); color: var(--blanc); }

/* ---------- Cartes de centres ---------- */
.centres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 820px) { .centres { grid-template-columns: 1fr; } }
.centre {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem;
  background: var(--blanc); border: 1px solid var(--brume); border-radius: var(--rayon);
  padding: 1.25rem; box-shadow: var(--ombre);
}
.centre__visuel { border-radius: var(--rayon-s); overflow: hidden; background: var(--brume); min-height: 220px; margin: 0; }
.centre__visuel img { width: 100%; height: 100%; object-fit: cover; }
.centre__visuel--bientot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--indigo); color: var(--blanc);
  padding: 1rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; line-height: 1.25;
}
.centre__visuel--bientot svg { width: 44px; height: 44px; color: var(--etoile); margin: 0 auto .6rem; }
.centre__corps { display: flex; flex-direction: column; min-width: 0; }
.centre h3 { font-size: 1.5rem; margin-bottom: .35rem; }
.centre .pilule { align-self: flex-start; margin-bottom: .85rem; }
.centre__texte { color: var(--ardoise); font-size: .975rem; }
.centre__infos { list-style: none; padding: 0; margin: 0 0 1.1rem; font-size: .975rem; color: var(--ardoise); }
.centre__infos li { display: flex; gap: .55rem; margin-bottom: .45rem; }
.centre__infos svg { width: 18px; height: 18px; flex: none; margin-top: .2em; color: var(--azur-profond); }
.centre .boutons { margin-top: auto; }
.centre .bouton { min-height: 44px; font-size: 1rem; padding: .55em 1.15em; }
@media (max-width: 460px) {
  .centre { grid-template-columns: 1fr; }
  .centre__visuel { min-height: 0; aspect-ratio: 16 / 9; }
  .centre__visuel img { object-position: center 35%; }
  .centre__visuel--bientot { aspect-ratio: auto; padding-block: 1.5rem; }
}
.centre--large { grid-template-columns: 240px minmax(0, 1fr); padding: 1.5rem; gap: 1.75rem; }
.centre--large .centre__visuel { min-height: 340px; }
.centre--large h3 { font-size: 1.75rem; }
@media (max-width: 640px) { .centre--large { grid-template-columns: 1fr; } .centre--large .centre__visuel { min-height: 0; aspect-ratio: 4 / 3; } .centre--large .centre__visuel--bientot { aspect-ratio: auto; padding-block: 2rem; } }

/* ---------- Application (captures) ---------- */
.telephones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 2vw, 1.5rem); align-items: start; max-width: 560px; margin-inline: auto; }
.telephone { margin: 0; }
.telephone img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top;
  border-radius: 22px; border: 6px solid var(--encre); background: var(--encre);
  box-shadow: 0 14px 34px rgba(11, 36, 107, .18);
}
.telephone:nth-child(2) { margin-top: 2rem; }
.telephone figcaption { text-align: center; font-size: .875rem; color: var(--ardoise); margin-top: .7rem; font-weight: 600; }
@media (max-width: 480px) { .telephone img { border-width: 4px; border-radius: 16px; } .telephone:nth-child(2) { margin-top: 1rem; } .telephone figcaption { font-size: .8rem; } }

/* ---------- Bandeau (dégradé signature : un seul par page) ---------- */
.bandeau {
  background: linear-gradient(120deg, var(--indigo) 0%, var(--azur-profond) 100%);
  color: var(--blanc); border-radius: 28px; padding: clamp(1.75rem, 1.25rem + 3vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 2rem; align-items: center;
}
.bandeau h2 { color: var(--blanc); }
.bandeau p { color: var(--blanc); max-width: 60ch; }
.bandeau p:last-child { margin-bottom: 0; }
.bandeau .surtitre { color: var(--blanc); }
@media (max-width: 760px) { .bandeau { grid-template-columns: 1fr; } }

/* ---------- Étapes ---------- */
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .etapes { grid-template-columns: 1fr; } }
.etapes li {
  counter-increment: etape; position: relative;
  background: var(--blanc); border: 1px solid var(--brume); border-radius: var(--rayon); padding: 1.5rem 1.5rem 1.4rem;
}
.etapes li::before {
  content: counter(etape); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: .9rem;
  background: var(--marine); color: var(--blanc); font: 700 1.25rem/1 var(--f-titre);
}
.etapes h3 { font-size: 1.2rem; }
.etapes p { margin: 0; color: var(--ardoise); }

/* ---------- Modèle (deux colonnes) ---------- */
.modele { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .modele { grid-template-columns: 1fr; } }
.modele .carte { padding: 1.75rem; }
.carte--marine { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.carte--marine h3 { color: var(--blanc); }
.carte--marine p { color: var(--sur-sombre); }
.modele .coches { margin-bottom: 0; }
.carte--marine .signature { color: var(--ciel); }

/* ---------- Promesse ---------- */
.promesse { text-align: center; }
.promesse__phrase { font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); line-height: 1.2; color: var(--marine); margin: 0 auto .6em; max-width: 26ch; text-wrap: balance; }
.promesse .boutons { justify-content: center; }
.promesse__devise { font-size: 1rem; font-weight: 600; letter-spacing: .08em; color: var(--azur-profond); margin: 0; }

/* ---------- Formulaire ---------- */
.formulaire { background: var(--blanc); border: 1px solid var(--brume); border-radius: 24px; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: var(--ombre); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.champ--large { grid-column: 1 / -1; }
@media (max-width: 640px) { .champs { grid-template-columns: 1fr; } }
.champ label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--encre); }
.champ .facultatif { font-weight: 400; color: var(--ardoise); }
.champ .aide { display: block; font-size: .875rem; color: var(--ardoise); margin: -.15rem 0 .4rem; }
.champ input, .champ textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--papier);
  border: 1.5px solid #8094B5; border-radius: var(--rayon-s); padding: .7em .85em; min-height: 48px;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--azur-profond); outline-offset: 1px; border-color: var(--azur-profond); background: var(--blanc); }
.champ [aria-invalid="true"] { border-color: var(--rouge); background: #FFF7F7; }
.erreur { display: block; color: var(--rouge); font-size: .9rem; font-weight: 600; margin-top: .35rem; }
.erreur:empty { display: none; }
.formulaire__pied { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mention { font-size: .875rem; color: var(--ardoise); margin: 1rem 0 0; }
.note-formulaire { margin: 0 0 1.25rem; }
.texte-ardoise { color: var(--ardoise); }
.resultat {
  margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: var(--rayon-s);
  background: var(--brume); border-left: 5px solid var(--azur-profond);
}
.resultat[hidden] { display: none; }
.resultat p { margin-bottom: .75rem; }
.bouton--whatsapp { background: var(--marine); color: var(--blanc); }
.bouton--whatsapp svg { color: #25D366; }
.bouton--whatsapp:hover { background: #142F80; }
.resume-erreurs { color: var(--rouge); font-weight: 600; margin: 1rem 0 0; }
.resume-erreurs:empty { display: none; }

/* ---------- Contact ---------- */
.contact-lignes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.contact-lignes li { display: flex; gap: 1rem; align-items: center; }
.contact-lignes .pastille { margin: 0; width: 48px; height: 48px; }
.contact-lignes .pastille svg { width: 22px; height: 22px; }
.contact-lignes strong { display: block; font-family: var(--f-titre); color: var(--marine); font-size: 1.05rem; }
.contact-lignes span { color: var(--ardoise); }

/* ---------- Texte long (mentions) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.brouillon {
  background: #FFF8DD; border: 1px solid #D9AE12; border-radius: var(--rayon-s);
  padding: 1rem 1.25rem; margin-bottom: 2rem; color: var(--encre);
}
.a-completer { background: #FFF1B8; padding: 0 .3em; border-radius: 4px; }

/* ---------- 404 ---------- */
.erreur-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.erreur-page__code { font-family: var(--f-titre); font-weight: 700; font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; color: var(--etoile); margin: 0 0 .5rem; }
.erreur-page .chapo { margin-inline: auto; }
.erreur-page .boutons { justify-content: center; }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine); color: var(--sur-sombre); padding-block: 3.5rem 2rem; font-size: .975rem; }
.pied a { color: var(--blanc); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 420px) { .pied__grille { grid-template-columns: 1fr; } }
.pied__marque img { width: 160px; height: auto; margin-bottom: 1.1rem; }
.pied .signature { color: var(--ciel); margin-bottom: .75rem; }
.pied__titre { font-family: var(--f-titre); font-size: 1rem; font-weight: 700; color: var(--blanc); letter-spacing: .04em; margin: 0 0 .9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .55rem; }
.pied__bas {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .9rem;
}
.pied__bas p { margin: 0; }
.lien-icone { display: inline-flex; align-items: center; gap: .5rem; }
.lien-icone svg { width: 18px; height: 18px; flex: none; }

/* ---------- Utilitaires ---------- */
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.centrer { text-align: center; }
.centrer .boutons { justify-content: center; }

@media print {
  .entete, .pied, .menu-bouton, .lien-evitement { display: none; }
  .sombre { background: none; color: var(--encre); }
  .sombre h1, .sombre h2 { color: var(--marine); }
}

/* ---------- Deux portes, le réseau en chiffres, la franchise mise en avant (16/10/2026) ---------- */
.portes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.porte { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--rayon-s);
  text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: var(--blanc); }
.porte:hover { background: rgba(255, 255, 255, .14); }
.porte--etoile { background: var(--etoile); border-color: var(--etoile); color: var(--marine); }
.porte--etoile:hover { background: #f6d55a; }
.porte__public { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.porte__action { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.porte__action svg { width: 20px; height: 20px; flex: 0 0 20px; }
.porte__detail { font-size: .9rem; line-height: 1.45; opacity: .9; }
.porte:focus-visible { outline: 3px solid var(--etoile); outline-offset: 3px; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chiffre { background: var(--blanc); border-radius: var(--rayon-s); padding: 20px; box-shadow: var(--ombre); }
.chiffre b { display: block; font-family: var(--f-titre); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--marine); line-height: 1.1; }
.chiffre span { color: var(--ardoise); font-size: .92rem; }
.franchise-bloc .grille .carte { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--sur-sombre); }
.franchise-bloc .grille .carte h3 { color: var(--blanc); }
.conditions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.condition { border-radius: var(--rayon-s); padding: 18px; background: var(--etoile); color: var(--marine); }
.condition--clair { background: rgba(255, 255, 255, .1); color: var(--blanc); border: 1px solid rgba(255, 255, 255, .2); }
.condition b { display: block; font-family: var(--f-titre); font-size: 1.45rem; line-height: 1.15; }
.condition span { font-size: .9rem; line-height: 1.4; }
.tarifs { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.tarifs th, .tarifs td { text-align: start; padding: 14px 18px; border-bottom: 1px solid var(--brume); vertical-align: top; }
.tarifs thead th { background: var(--marine); color: var(--blanc); font-family: var(--f-titre); }
.tarifs td:last-child { font-weight: 600; color: var(--marine); white-space: nowrap; }
.tarifs tr:last-child td { border-bottom: 0; }
.tarifs small { display: block; color: var(--ardoise); font-weight: 400; margin-top: 2px; }
.faq details { background: var(--blanc); border-radius: var(--rayon-s); box-shadow: var(--ombre); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 20px; font-family: var(--f-titre); font-weight: 700; color: var(--marine); }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--ardoise); }
@media (max-width: 900px) {
  .chiffres, .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .portes { grid-template-columns: 1fr; }
  .tarifs td:last-child { white-space: normal; }
  .tarifs th, .tarifs td { padding: 12px; }
}
/* Sur téléphone, le tableau des conditions devient une pile de fiches : poste, détail, montant. */
@media (max-width: 640px) {
  .tarifs thead { display: none; }
  .tarifs, .tarifs tbody, .tarifs tr, .tarifs td { display: block; width: 100%; }
  .tarifs tr { padding: 14px 16px; border-bottom: 1px solid var(--brume); }
  .tarifs tr:last-child { border-bottom: 0; }
  .tarifs td { padding: 2px 0; border: 0; }
  .tarifs td:first-child { font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 1.05rem; }
  .tarifs td:last-child { margin-top: 6px; }
}
/* Cartes du bloc franchise sur fond Marine : texte clair lisible (le texte Ardoise des cartes disparaissait). */
.franchise-bloc .carte p { color: var(--sur-sombre); }