:root {
  --motif-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.07' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --motif-sable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%233D6B5C' stroke-opacity='0.035' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --motif-appel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.04' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --motif-bandeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.06' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --motif-encart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.055' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --motif-pied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.03' stroke-width='1.1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Cpath d='M0 0 21 21M72 0 51 21M0 72l21-21M72 72 51 51M36 0v14.8M36 72V57.2M0 36h14.8M72 36H57.2'/%3E%3C/g%3E%3C/svg%3E");
  --primaire: #3d6b5c;
  --primaire-fonce: color-mix(in srgb, var(--primaire) 62%, #08130f);
  --primaire-nuit: color-mix(in srgb, var(--primaire) 38%, #050b09);
  --primaire-clair: color-mix(in srgb, var(--primaire) 11%, #fff);
  --primaire-doux: color-mix(in srgb, var(--primaire) 22%, #fff);
  --accent: #ddb35a;
  --accent-clair: #f3dfae;
  --accent-texte: #8a6420;
  --fond: #faf9f5;
  --sable: #f4f0e6;
  --carte: #ffffff;
  --texte: #1c2b25;
  --attenue: #5c6b64;
  --bordure: #e5e1d5;
  --erreur: #b9382e;
  --erreur-fond: #fbeae8;
  --succes: #2c6146;
  --whatsapp: #1fa855;
  --rayon: 18px;
  --ombre: 0 1px 2px rgba(20, 35, 29, .05), 0 8px 24px -8px rgba(20, 35, 29, .12);
  --ombre-forte: 0 2px 4px rgba(20, 35, 29, .06), 0 24px 48px -16px rgba(20, 35, 29, .28);
  --police-titre: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --police-arabe: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  --largeur: 1160px;
  --gouttiere: clamp(16px, 4vw, 32px);
}

/* Le quadrillage, plus dense, est un peu plus pâle que l'arabesque. */
.motif-neutre {
  --motif-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.056' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%23DDB35A' fill-opacity='0.056'/%3E%3C/g%3E%3C/svg%3E");
  --motif-sable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%233D6B5C' stroke-opacity='0.028' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%233D6B5C' fill-opacity='0.028'/%3E%3C/g%3E%3C/svg%3E");
  --motif-appel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.032' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%23FFFFFF' fill-opacity='0.032'/%3E%3C/g%3E%3C/svg%3E");
  --motif-bandeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.048' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%23DDB35A' fill-opacity='0.048'/%3E%3C/g%3E%3C/svg%3E");
  --motif-encart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.044' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%23DDB35A' fill-opacity='0.044'/%3E%3C/g%3E%3C/svg%3E");
  --motif-pied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23DDB35A' stroke-opacity='0.024' stroke-width='1'%3E%3Cpath d='M0 .5h44M.5 0v44'/%3E%3Ccircle cx='22.5' cy='22.5' r='2.2' fill='%23DDB35A' fill-opacity='0.024'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  font-variation-settings: 'SOFT' 50, 'opsz' 96;
}
p { margin: 0 0 1em; }
.icone { flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--texte); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.lien-evitement:focus { top: 12px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.35em;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--police-texte); text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.bouton:hover { transform: translateY(-1px); }
.bouton .icone { transition: transform .18s ease; }
.bouton:hover .icone-fleche { transform: translateX(3px); }
.bouton-primaire { background: var(--primaire); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primaire) 70%, transparent); }
.bouton-primaire:hover { background: var(--primaire-fonce); }
.bouton-or { background: var(--accent); color: #2b2111; box-shadow: 0 10px 24px -10px rgba(221, 179, 90, .8); }
.bouton-or:hover { background: #e6c273; }
.bouton-fantome { border-color: rgba(255, 255, 255, .35); color: #fff; background: rgba(255, 255, 255, .06); }
.bouton-fantome:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.bouton-contour { border-color: var(--bordure); color: var(--texte); background: var(--carte); }
.bouton-contour:hover { border-color: var(--primaire); color: var(--primaire); }
.bouton-whatsapp { background: var(--whatsapp); color: #fff; }
.bouton-whatsapp:hover { background: #178d46; }
.bouton-bloc { width: 100%; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--bordure) 70%, transparent);
}
.entete-interieur { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; margin-right: auto; }
.marque-logo {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, var(--primaire), var(--primaire-fonce));
  color: var(--accent-clair); font: 600 17px/1 var(--police-titre); letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px rgba(221, 179, 90, .55), 0 6px 14px -6px color-mix(in srgb, var(--primaire) 60%, transparent);
}
.marque-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.marque-texte { display: flex; flex-direction: column; min-width: 0; }
.marque-nom {
  font: 600 18px/1.15 var(--police-titre); color: var(--texte);
  /* Deux lignes au maximum, jamais de coupure au milieu d'un mot : un nom
     d'école long doit rester lisible en entier plutôt que d'être tronqué. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
}
.marque-nom--long { font-size: 16px; }
.marque-nom--tres-long { font-size: 14.5px; line-height: 1.2; }
.marque-arabe {
  font: 400 15px/1.2 var(--police-arabe); color: var(--accent-texte);
  /* Aligné sous le début du nom : sans cela, un nom long sur deux lignes
     renvoie le nom arabe tout à droite, détaché du logo. */
  align-self: flex-start;
}
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; padding: 10px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: 15px; color: var(--attenue);
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--texte); background: var(--sable); }
.nav a[aria-current="page"] { color: var(--primaire); background: var(--primaire-clair); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.lien-espace {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  color: var(--attenue); font-weight: 500; font-size: 15px; text-decoration: none; border-radius: 999px;
}
.lien-espace:hover { color: var(--primaire); }
.entete .bouton { min-height: 44px; padding: .6em 1.15em; font-size: 14.5px; }
.menu-panneau { display: flex; align-items: center; gap: 24px; }
.menu-case, .menu-bouton, .menu-voile { display: none; }

/* Téléphone et tablette : menu en panneau déroulant sous l'en-tête, voile
   sombre derrière (CSS seul, case à cocher). Positions « absolute » par
   rapport à l'en-tête : son backdrop-filter en fait le bloc de référence. */
@media (max-width: 960px) {
  .entete-interieur { min-height: 64px; gap: 12px; }
  .marque-logo { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .marque-nom { font-size: 16.5px; }
  .marque-nom--long { font-size: 15px; }
  .marque-nom--tres-long { font-size: 13px; line-height: 1.25; }
  .marque-arabe { font-size: 13.5px; }
  .menu-bouton {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; color: var(--texte);
  }
  .menu-bouton .icone-fermer { display: none; }
  .menu-case:checked ~ .menu-bouton .icone-menu { display: none; }
  .menu-case:checked ~ .menu-bouton .icone-fermer { display: block; }
  .menu-voile {
    display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
    background: rgba(8, 16, 13, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
  }
  .menu-panneau {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 12px var(--gouttiere) 22px; background: var(--fond);
    border-bottom: 1px solid var(--bordure); border-radius: 0 0 24px 24px;
    box-shadow: 0 24px 40px -20px rgba(8, 16, 13, .35);
    max-height: calc(100vh - 64px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .menu-case:checked ~ .menu-voile { opacity: 1; visibility: visible; }
  .menu-case:checked ~ .menu-panneau { opacity: 1; visibility: visible; transform: none; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 14px; font-size: 17px; color: var(--texte); }
  .entete-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .entete .bouton, .lien-espace { justify-content: center; min-height: 52px; font-size: 16px; }
  .lien-espace { border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); }
}

/* ---------- Bandeau d'accueil (hero) ---------- */
/* Volontairement court et aéré : nom de l'école, action principale. */
.hero {
  position: relative; overflow: hidden; color: #f6f3ea; text-align: center;
  background:
    radial-gradient(700px 320px at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    linear-gradient(160deg, var(--primaire-fonce), var(--primaire-nuit));
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--motif-hero);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.hero-interieur {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-block: clamp(56px, 8vw, 88px) clamp(76px, 9vw, 108px);
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0; color: #fff; max-width: 16em; text-wrap: balance;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
}
.hero-arabe { font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.4 var(--police-arabe); color: var(--accent); margin: 10px 0 0; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; }
.lien-discret {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  color: rgba(246, 243, 234, .8); font-weight: 500; font-size: 15px; text-decoration: none;
}
.lien-discret:hover { color: #fff; }
.lien-discret .icone { transition: transform .18s ease; }
.lien-discret:hover .icone-fleche { transform: translateX(3px); }
.hero-vague { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4vw, 56px); color: var(--fond); }
.hero-vague svg { width: 100%; height: 100%; display: block; }
@media (max-width: 520px) {
  .hero-interieur { padding-block: 40px 60px; }
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.3rem); }
  .hero-actions { width: 100%; margin-top: 26px; }
  .hero-actions .bouton { width: 100%; min-height: 52px; font-size: 16px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
/* Deux sections claires consécutives : un seul espacement entre elles. */
.section:not(.section-sable) + .section:not(.section-sable) { padding-top: 0; }
.section-sable { background: var(--sable); position: relative; }
.section-sable::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--motif-sable);
}
.section-sable > * { position: relative; }
.surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte);
}
.surtitre::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.section-titre { font-size: clamp(1.85rem, 3.6vw, 2.75rem); max-width: 20em; }
.section-intro { color: var(--attenue); font-size: 1.07rem; max-width: 40em; }
.entete-section { margin-bottom: clamp(32px, 5vw, 52px); }
.entete-section-centre { text-align: center; }
.entete-section-centre .section-titre, .entete-section-centre .section-intro { margin-inline: auto; }
.entete-section-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.grille-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.atout {
  position: relative; padding: 28px; border-radius: var(--rayon); background: var(--carte);
  border: 1px solid var(--bordure); box-shadow: var(--ombre);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.atout:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--primaire-doux); }
.atout-icone {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(145deg, var(--primaire-clair), var(--primaire-doux)); color: var(--primaire);
}
.atout:nth-child(4n+2) .atout-icone { background: linear-gradient(145deg, #fbf3df, #f5e3b8); color: var(--accent-texte); }
.atout h3 { font-size: 1.28rem; margin-bottom: 8px; }
.atout p { color: var(--attenue); margin: 0; font-size: 15.5px; }

@media (max-width: 640px) {
  .section { padding-block: 56px; }
  .entete-section { margin-bottom: 26px; }
  .section-titre { font-size: clamp(1.6rem, 7vw, 2rem); }
  .section-intro { font-size: 1rem; }
  .entete-section-ligne { align-items: flex-start; }
  .entete-section-ligne > .bouton { width: 100%; }
  .grille-atouts { gap: 12px; }
  /* Cartes en lignes compactes : icône à gauche, texte à droite. */
  .atout { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; align-items: start; padding: 18px; }
  .atout-icone { width: 48px; height: 48px; border-radius: 14px; margin: 0; grid-row: span 2; }
  .atout-icone .icone { width: 22px; height: 22px; }
  .atout h3 { font-size: 1.12rem; margin: 2px 0 0; }
  .atout p { font-size: 15px; }
}

/* ---------- Galerie (carrousel) ---------- */
.section-galerie .entete-section { margin-bottom: 26px; }
.carrousel { position: relative; }
.carrousel-piste {
  --marge: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  list-style: none; margin: 0; display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px var(--marge) 14px; scroll-padding-inline: var(--marge);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-diapo { flex: 0 0 min(620px, 86vw); scroll-snap-align: start; }
.carrousel-diapo figure {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 22px; background: var(--primaire-clair); box-shadow: var(--ombre);
}
.carrousel-diapo img { width: 100%; height: 100%; object-fit: cover; }
.carrousel-diapo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px;
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1.35;
  background: linear-gradient(transparent, rgba(8, 16, 13, .75));
}
.carrousel-points { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.carrousel-points button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.carrousel-points button::before {
  content: ''; width: 8px; height: 8px; border-radius: 99px; background: #cfc9b8;
  transition: width .25s ease, background-color .25s ease;
}
.carrousel-points button[aria-current="true"]::before { width: 24px; background: var(--primaire); }
.carrousel-fleches { display: flex; gap: 10px; }
.carrousel-fleche {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--carte); color: var(--texte); box-shadow: var(--ombre);
  transition: border-color .15s ease, color .15s ease;
}
.carrousel-fleche:hover { border-color: var(--primaire); color: var(--primaire); }
@media (max-width: 640px) {
  .carrousel-fleches { display: none; } /* au doigt, on fait glisser */
  .carrousel-piste { gap: 12px; }
  .carrousel-diapo figure { border-radius: 18px; }
}

/* ---------- Niveaux ---------- */
.niveaux-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cycle {
  background: var(--carte); border-radius: var(--rayon); padding: 26px; border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
}
.cycle-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cycle-entete h3 { margin: 0; font-size: 1.3rem; }
.cycle-entete .icone-rond {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primaire); color: var(--accent-clair);
}
.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: var(--sable); border: 1px solid var(--bordure); font-size: 14px; font-weight: 600;
}
.puce-ouverte { background: #fdf6e4; border-color: #edd49a; color: #6d4f14; }
.puce-ouverte::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3aa76d; }
.legende { margin-top: 22px; font-size: 14px; color: var(--attenue); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- En-tête des pages intérieures ---------- */
.bandeau-page {
  position: relative; overflow: hidden; color: #f6f3ea;
  background:
    radial-gradient(700px 300px at 90% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--primaire-fonce), var(--primaire-nuit));
  padding-block: clamp(40px, 6vw, 64px) clamp(60px, 8vw, 92px);
}
.bandeau-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--motif-bandeau);
  mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.bandeau-page .conteneur { position: relative; }
.fil-ariane { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(246, 243, 234, .65); margin-bottom: 18px; }
.fil-ariane a { color: rgba(246, 243, 234, .85); text-decoration: none; }
.fil-ariane a:hover { color: #fff; text-decoration: underline; }
.bandeau-page h1 { font-size: clamp(2rem, 4.2vw, 3rem); color: #fff; margin-bottom: 10px; }
.bandeau-page p { color: rgba(246, 243, 234, .8); font-size: 1.1rem; max-width: 38em; margin: 0; }
.chevauchement { margin-top: clamp(-64px, -6vw, -40px); position: relative; z-index: 2; }
main > .chevauchement:last-child { margin-bottom: clamp(64px, 9vw, 112px); }

/* ---------- À propos ---------- */
.grille-apropos { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.carte-texte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 24px; box-shadow: var(--ombre);
  padding: clamp(26px, 5vw, 52px);
}
.texte-riche p { font-size: 1.08rem; color: #33443d; }
.texte-riche p:first-of-type::first-letter {
  float: left; font: 600 3.6em/.82 var(--police-titre); color: var(--primaire); padding: 6px 10px 0 0;
}
.encart {
  background: var(--primaire-nuit); color: #f6f3ea; border-radius: 24px; padding: 30px; position: sticky; top: 100px;
  background-image: var(--motif-encart), linear-gradient(160deg, var(--primaire-fonce), var(--primaire-nuit));
}
.encart h3 { color: #fff; font-size: 1.35rem; }
.encart ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.encart li { display: flex; gap: 12px; align-items: flex-start; color: rgba(246, 243, 234, .85); font-size: 15px; }
.encart li .icone { color: var(--accent); margin-top: 2px; }
.encart li strong { color: #fff; display: block; }
@media (max-width: 900px) { .grille-apropos { grid-template-columns: 1fr; } .encart { position: static; } }
@media (max-width: 640px) {
  .bandeau-page { padding-block: 28px 64px; }
  .bandeau-page h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .bandeau-page p { font-size: 1rem; }
  .carte-texte { padding: 22px 20px; border-radius: 20px; }
  .texte-riche p { font-size: 1rem; }
  .encart { padding: 22px 20px; border-radius: 20px; }
  .carte-centree { padding: 28px 20px; border-radius: 22px; }
  .actions-centrees .bouton { flex: 1 1 100%; min-height: 52px; }
  .formulaire { padding: 20px 16px; border-radius: 20px; }
  .formulaire legend { font-size: 1.2rem; }
  .envoi .bouton { width: 100%; min-height: 54px; font-size: 16px; }
  .carte-aside { padding: 20px; }
}

/* ---------- Contact ---------- */
.grille-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.carte-contact {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--rayon);
  background: var(--carte); border: 1px solid var(--bordure); box-shadow: var(--ombre); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.carte-contact:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--primaire-doux); }
.carte-contact .icone-rond {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--primaire-clair); color: var(--primaire);
}
.carte-contact.whatsapp .icone-rond { background: #e3f6ea; color: var(--whatsapp); }
.carte-contact-texte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.carte-contact .libelle { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--attenue); }
.carte-contact .valeur { font: 600 1.2rem/1.35 var(--police-titre); color: var(--texte); word-break: break-word; }
.carte-contact .action { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--primaire); }
.carte-contact.whatsapp .action { color: var(--whatsapp); }
@media (max-width: 640px) {
  .grille-contact { grid-template-columns: 1fr; gap: 10px; }
  .carte-contact { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .carte-contact .icone-rond { width: 46px; height: 46px; border-radius: 14px; margin: 0; }
  .carte-contact-texte { flex: 1; gap: 2px; }
  .carte-contact .libelle { font-size: 11.5px; }
  .carte-contact .valeur { font: 600 1rem/1.35 var(--police-texte); }
  /* Sur téléphone la carte entière est le bouton : on ne garde que la flèche. */
  .carte-contact .action { margin: 0; padding: 0; font-size: 0; }
  .carte-contact .action .icone { width: 20px; height: 20px; }
}
.horaires { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.horaires li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--sable); font-weight: 500; }
.horaires li .icone { color: var(--primaire); }

/* ---------- Formulaire de pré-inscription ---------- */
.grille-formulaire { display: grid; grid-template-columns: 1fr 340px; gap: clamp(22px, 4vw, 40px); align-items: start; }
@media (max-width: 960px) { .grille-formulaire { grid-template-columns: 1fr; } }
.formulaire { background: var(--carte); border: 1px solid var(--bordure); border-radius: 26px; box-shadow: var(--ombre-forte); padding: clamp(22px, 4vw, 44px); }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
.formulaire legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 20px; font: 600 1.35rem/1.2 var(--police-titre); }
.etape-numero {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--primaire); color: #fff; font: 700 15px/1 var(--police-texte);
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.champ-large { grid-column: 1 / -1; }
@media (max-width: 600px) { .champs { grid-template-columns: 1fr; } }
.champ label, .champ .etiquette { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.champ .facultatif { font-weight: 400; color: var(--attenue); font-size: 13px; }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ input[type="date"], .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 13px;
  border: 1.5px solid var(--bordure); background: #fdfcf9; color: var(--texte);
  font: 400 16px/1.4 var(--police-texte); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none; -webkit-appearance: none;
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ select {
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235c6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: #cfcabb; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--primaire); background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaire) 16%, transparent);
}
.champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--erreur); background: #fffafa; }
.message-erreur { display: flex; align-items: center; gap: 6px; color: var(--erreur); font-size: 13.5px; font-weight: 500; margin-top: 6px; }
.choix-segmente { display: flex; gap: 10px; }
.choix-segmente label { flex: 1; margin: 0; }
.choix-segmente input { position: absolute; opacity: 0; pointer-events: none; }
.choix-segmente span {
  display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 13px;
  border: 1.5px solid var(--bordure); background: #fdfcf9; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.choix-segmente input:checked + span { border-color: var(--primaire); background: var(--primaire-clair); color: var(--primaire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 12%, transparent); }
.choix-segmente input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.consentement { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--sable); border: 1px solid var(--bordure); font-size: 14.5px; color: #3b4a43; cursor: pointer; }
.consentement input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primaire); flex-shrink: 0; }
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.alerte { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; margin-bottom: 26px; font-size: 15px; }
.alerte-erreur { background: var(--erreur-fond); color: #7d241d; border: 1px solid #f1c9c4; }
.alerte-info { background: var(--primaire-clair); color: var(--primaire-fonce); border: 1px solid var(--primaire-doux); }
.envoi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.envoi p { margin: 0; font-size: 14px; color: var(--attenue); max-width: 30em; }

.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; counter-reset: etape; }
.etapes li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 22px; }
.etapes li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: linear-gradient(var(--primaire-doux), transparent); }
.etapes .rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primaire-clair); color: var(--primaire); border: 1px solid var(--primaire-doux); }
.etapes strong { display: block; margin-top: 2px; }
.etapes span { color: var(--attenue); font-size: 14.5px; }
.carte-aside { background: var(--carte); border: 1px solid var(--bordure); border-radius: 22px; padding: 26px; box-shadow: var(--ombre); }
.carte-aside h2 { font-size: 1.3rem; margin-bottom: 20px; }
.carte-aside + .carte-aside { margin-top: 18px; }
.note-aside { margin: 16px 0 0; font-size: 14px; color: var(--attenue); }
.liste-classes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Confirmation & états vides ---------- */
.carte-centree {
  max-width: 640px; margin-inline: auto; text-align: center; background: var(--carte);
  border: 1px solid var(--bordure); border-radius: 28px; padding: clamp(32px, 6vw, 60px); box-shadow: var(--ombre-forte);
}
.coche-animee {
  width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center;
  background: #e3f3e9; color: var(--succes); box-shadow: 0 0 0 10px #f1f9f4;
  animation: apparition .5s cubic-bezier(.2, .9, .3, 1.4) both;
}
/* Trait masqué puis dessiné : seulement si les animations sont permises,
   sinon la coche resterait invisible. */
@media (prefers-reduced-motion: no-preference) {
  .coche-animee svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trait .5s .35s ease forwards; }
}
@keyframes apparition { from { transform: scale(.4); opacity: 0; } }
@keyframes trait { to { stroke-dashoffset: 0; } }
.carte-centree h1, .carte-centree h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.carte-centree > p { color: var(--attenue); font-size: 1.05rem; }
.carte-centree .note { font-size: 15px; }
.ticket {
  margin: 28px auto; max-width: 360px; padding: 20px; border-radius: 18px;
  border: 2px dashed #e0c784; background: #fdf8ea;
}
.ticket .libelle { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); }
.ticket .code { font: 600 2rem/1.2 var(--police-titre); letter-spacing: .08em; color: var(--texte); margin-top: 4px; }
.page-pleine { min-height: 100vh; }
.etat-vide-icone { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 22px; display: grid; place-items: center; background: var(--primaire-clair); color: var(--primaire); }
.actions-centrees { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ---------- Pied de page ---------- */
/* Court : l'école et comment la joindre, sans répéter la navigation. */
.pied {
  color: rgba(240, 237, 228, .72); font-size: 14.5px;
  background: var(--primaire-nuit);
  background-image: var(--motif-pied), linear-gradient(180deg, var(--primaire-nuit), color-mix(in srgb, var(--primaire-nuit) 80%, #000));
}
.pied a { color: rgba(240, 237, 228, .85); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied .marque-nom { color: #fff; }
.pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 32px 24px; }
/* Sans cette contrainte, un nom d'école long élargit le pied de page et
   fait déborder tout le site horizontalement sur téléphone. */
.pied-haut .marque { max-width: 100%; }
.pied .marque-nom { -webkit-line-clamp: 3; }
.pied-contacts { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pied-contacts a { display: inline-flex; align-items: center; gap: 8px; }
.pied-contacts .icone { color: var(--accent); }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 13.5px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 16px calc(18px + env(safe-area-inset-bottom));
}
.pied-bas nav { display: flex; gap: 18px; }
@media (max-width: 560px) {
  .pied-haut { flex-direction: column; align-items: flex-start; padding-block: 28px 20px; }
  .pied-contacts { flex-direction: column; gap: 12px; }
}

/* ---------- Apparition au défilement (CSS seul, sans JavaScript) ---------- */
@supports (animation-timeline: view()) {
  .revele { animation: revele both ease-out; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes revele { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}