/* COULEURS ET POLICES RELEVÉES DANS LA FEUILLE DE STYLE DE CÉCILE.
   J'avais inventé une palette et des polices système ; ce sont celles-ci
   qu'elle avait choisies :
     Montserrat pour les titres, Lato pour le texte
     orange #FF6500, gris de texte #737373, noir #0D0D0D
     corps à 15 px, interligne 1.8 sur les paragraphes, 1.4 sur les titres */
:root{--orange:#FF6500;--orange-clair:#FF741A;--creme:#FDECE0;--sable:#FAF6F2;
--bord:#E6E0DA;--encre:#0D0D0D;--gris:#737373;--violet:#7C3AED;
--titre:"Montserrat","Segoe UI",sans-serif;
--texte:"Lato","Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* GARDE-FOU CONTRE LE DÉFILEMENT LATÉRAL.
   Un seul élément qui dépasse suffit à rendre toute la page glissante sur un
   téléphone — le panneau de menu, par exemple, sort volontairement de sa boîte
   pour occuper la pleine largeur. On coupe à la racine. */
html,body{overflow-x:hidden;max-width:100%}
body{font-family:var(--texte);color:var(--gris);font-size:15px;
line-height:1.8;background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block;border-radius:12px}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--bord)}
/* Sur l'accueil : transparent, posé sur le diaporama, texte en blanc. */
.entete--sur-image{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:none}
.entete--sur-image .marque{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.entete--sur-image .nav a,.entete--sur-image .nav .parent{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.entete--sur-image .nav a:hover,.entete--sur-image .nav .parent:hover{background:rgba(255,255,255,.14)}
/* Le sous-menu déroulant reste sur fond blanc : illisible autrement. */
.entete--sur-image .sous a{color:var(--gris);text-shadow:none}
.entete--sur-image .sous a:hover{background:var(--sable)}
.entete--sur-image .cta{text-shadow:none}
/* La bannière commence tout en haut : l'en-tête flotte par-dessus. */
.haut{position:relative}
.entete-in{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px}
/* Majuscules automatiques sur le nom et le menu, comme dans l'original
   (`.jw-header-title` et `.jw-menu` y portaient text-transform:uppercase).
   Le nom y était en 26 px, graisse 600. */
.marque{font-family:var(--titre);font-size:26px;font-weight:600;text-transform:uppercase;
letter-spacing:.01em;color:var(--encre);white-space:nowrap;line-height:1.2}
.marque:hover{text-decoration:none}
/* Le menu occupe la place restante et s'aligne à droite ; le bouton
   d'inscription est REPOUSSÉ À L'EXTRÊME DROITE, détaché des entrées, au lieu
   d'être collé à la dernière. Et il ne passe jamais à la ligne. */
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex:1;
justify-content:flex-end;flex-wrap:nowrap}
.nav>*{flex:0 0 auto}
.nav>*:last-child{margin-left:18px}
.nav>*{position:relative}
/* Marges latérales resserrées : avec le bouton détaché à droite, le menu
   demandait 1106 px pour un seuil de bascule à 1100 — six pixels de trop,
   et la ligne se cassait juste avant le passage en menu mobile. */
.nav a,.nav .parent{display:block;padding:9px 10px;font-family:var(--titre);
font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;
color:var(--gris);border-radius:8px;cursor:pointer;white-space:nowrap}
.nav a:hover,.nav .parent:hover{background:var(--sable);text-decoration:none}
.nav .actif{color:var(--orange)}
/* Le sous-menu passe DEVANT ses voisins.
   Sans plan d'empilement, les entrées déclarées après lui — jusqu'au bouton
   d'inscription — se dessinaient par-dessus et le masquaient. */
.sous{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;
border:1px solid var(--bord);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.09);
z-index:70}
.nav>*:hover,.nav>*:focus-within{z-index:70}
.nav>*:hover .sous,.nav>*:focus-within .sous{display:block}
.sous a{font-weight:400;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.cta{background:var(--orange);color:#fff!important;padding:10px 16px!important;
border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
/* `.nav a:hover` est plus spécifique que `.cta:hover` et l'emportait : le bouton
   d'inscription se repeignait en crème au survol, comme s'il s'effaçait.
   On monte la spécificité au même niveau. */
.nav a.cta:hover,.cta:hover{background:var(--orange-clair);color:#fff!important;text-decoration:none}

/* Bannière */
/* L'original déclarait un rapport 1:1 — une bannière presque carrée, donc
   nettement plus haute que ce que j'avais fait. On s'en approche sans aller
   jusqu'au carré, qui repousserait tout le contenu hors de l'écran. */
/* PLEINE PAGE : le diaporama d'accueil occupe toute la hauteur visible, moins
   rien — c'est la première chose qu'on voit du studio. */
.banniere{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
justify-content:center;text-align:center;overflow:hidden;background:#1a1220}
.banniere-vues{position:absolute;inset:0}
.banniere .vue{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:0;opacity:0;animation:defile 21s infinite}
/* Trois vues, 21 s de cycle : chacune reste visible 7 s, avec un fondu.
   Les pourcentages correspondent à un tiers de cycle par image. */
@keyframes defile{
  0%{opacity:0} 4%{opacity:1} 29%{opacity:1} 33%{opacity:0} 100%{opacity:0}
}
/* Respecter le réglage système « réduire les animations » : on fige alors la
   première vue au lieu de faire défiler. */
@media(prefers-reduced-motion:reduce){
  .banniere .vue{animation:none;opacity:0}
  .banniere .vue:first-child{opacity:1}
}
/* VOILE SOMBRE plutôt qu'une image transparente.
   Baisser l'opacité de la photo éclaircit ses zones déjà claires — cheveux
   blonds, peau — et le texte blanc s'y perdait. Un voile posé PAR-DESSUS
   assombrit uniformément et garantit le contraste où que tombe le texte.
   Il est plus dense au centre, là où le texte se trouve. */
.banniere::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at center,rgba(15,10,20,.72) 0%,rgba(15,10,20,.52) 70%,rgba(15,10,20,.62) 100%)}
/* Le titre du bandeau doit être BLANC.
   `h1,h2,h3{color:var(--encre)}` cible l'élément lui-même et l'emporte sur le
   `color:#fff` posé sur le conteneur : le titre restait bleu-noir sur fond
   sombre, donc illisible. On force la couleur sur chaque élément de texte. */
.banniere-txt,.banniere-txt h1,.banniere-txt p,.banniere-txt .sur{color:#fff}
.banniere-txt{position:relative;z-index:1;padding:40px 20px;
/* Une ombre portée discrète : même sur un fond clair imprévu, les lettres
   gardent leur contour. */
text-shadow:0 2px 14px rgba(0,0,0,.55)}
.banniere .sur{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.95}
.banniere h1{font-size:clamp(30px,5.5vw,52px);font-weight:700;margin:0 0 6px;line-height:1.25;
letter-spacing:.02em}
/* Le sous-titre était à 70 % de la taille du titre dans l'original. */
.banniere h1 span{display:inline-block;font-size:.7em;font-weight:700;margin-top:4px}
.banniere p{font-size:clamp(15px,2vw,19px)}
.banniere .cta{text-shadow:none}
/* Bannière simple : une image, sans texte ni voile. */
.banniere--image{min-height:0;display:block;background:none}
.banniere--image img{position:static;width:100%;height:clamp(220px,42vh,420px);
object-fit:cover;border-radius:0}
/* Un dégradé en haut de l'image : sans lui, un menu blanc posé sur une photo
   claire deviendrait illisible. Il ne couvre que la zone de l'en-tête. */
.banniere--image::after{content:"";position:absolute;inset:0 0 auto 0;height:130px;
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0));display:block;pointer-events:none}
.banniere--image{position:relative}
/* Bannière colorée : l'aplat orange de la page Stages. */
.banniere--couleur{min-height:0;background:var(--orange);padding:8px 0}
.banniere--couleur::after{display:none}
.banniere--couleur .banniere-txt{max-width:760px;text-shadow:none;padding:44px 20px}
.banniere--couleur h1{font-size:clamp(24px,3.4vw,34px);font-weight:400;
text-transform:uppercase;letter-spacing:.02em}
.banniere--couleur p{font-size:15px;margin-top:14px;line-height:1.7}
/* Le bouton s'inverse sur l'orange : fond blanc, texte orange. */
.banniere--couleur .cta{background:#fff;color:var(--orange)!important;
text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;padding:11px 24px!important}
.banniere--couleur .cta:hover{background:#FFF3EA}

.banniere .cta{display:inline-block;margin-top:22px;font-size:16px;
text-transform:none;letter-spacing:0;font-weight:700;padding:14px 30px!important}

/* Contenu */
/* `main` ne bride plus la largeur : ce sont les bandes qui la gèrent, et
   certaines occupent tout l'écran. C'est la structure du site d'origine. */
main{padding:0 0 20px}
main.large{max-width:none}
/* GRAISSE DES TITRES : 400, pas 700.
   Les titres de Cécile sont en Montserrat sans emphase — c'est ce qui donne au
   site son allure aérée. Je les avais mis en gras, ce qui les alourdissait. */
h1,h2,h3,h4{font-family:var(--titre);line-height:1.4;font-weight:400;color:var(--encre)}
main h1{font-size:clamp(24px,4vw,34px);margin:34px 0 14px}
main h2{font-size:clamp(20px,3vw,26px);margin:32px 0 12px}
main h3{font-size:18px;margin:24px 0 10px}
main>h1:first-child,main>h2:first-child{margin-top:0}
main p{margin:0 0 16px;color:var(--gris);font-size:15px}
main img{margin:26px 0}
.bande__texte>img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* ── BANDES ────────────────────────────────────────────────────────────────
   Reproduit la structure du site d'origine : des bandes horizontales pleine
   largeur, dont certaines placent l'image à côté du texte. */
.bande{position:relative}
.bande__texte{max-width:820px;margin:0 auto;padding:52px 20px}
/* Les tableaux de tarifs se lisent mieux resserrés : sur 820 px, le prix se
   retrouvait à l'autre bout de la ligne, loin de sa formule. */
.bande--tarifs .bande__texte{max-width:660px}
.bande__texte:has(.colonnes){max-width:1040px}
.bande--texte+.bande--texte .bande__texte{padding-top:0}
.bande--ombre{background:var(--sable)}
/* Bande à l'accent de la marque : fond orange, texte blanc, centré.
   C'est l'ouverture de la page Stages. */
.bande--accent{background:var(--orange);text-align:center}
/* Le blanc doit l'emporter sur `.bande p{color:var(--gris)}`, déclaré plus bas
   et de même spécificité : on double la classe pour passer devant. */
.bande--accent.bande--accent h1,.bande--accent.bande--accent h2,
.bande--accent.bande--accent h3,.bande--accent.bande--accent h4,
.bande--accent.bande--accent p,.bande--accent.bande--accent li,
.bande--accent.bande--accent .bande__texte{color:#fff}
.bande--accent h2{text-transform:uppercase;letter-spacing:.02em}
/* Le bouton s'inverse sur l'orange : fond blanc, texte orange. */
.bande--accent .bouton{background:#fff;color:var(--orange)!important;text-transform:none}
.bande--accent .bouton:hover{background:#FFF3EA}
/* Bande « narrow » : colonne plus étroite, comme dans l'original. */
.bande--etroite .bande__texte{max-width:660px}

/* Image latérale : deux colonnes égales, l'image occupant toute la hauteur.
   `bande--inverse` la renvoie à droite, comme dans l'original. */
.bande--split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.bande--split .bande__image{position:relative;min-height:340px}
.bande--split .bande__image img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 50%;border-radius:0}
/* Photo en portrait : on cadre par le haut plutôt qu'au centre. */
.bande--portrait .bande__image img{object-position:50% 12%}
.bande--split .bande__texte{max-width:none;padding:52px clamp(24px,4vw,56px)}
.bande--inverse .bande__image{order:2}

/* Image de fond avec texte par-dessus. Le voile garantit la lisibilité quelle
   que soit la zone de la photo qui passe derrière. */
.bande--fond{display:flex;align-items:center;justify-content:center;
min-height:clamp(280px,42vh,440px);overflow:hidden;background:#1a1220}
.bande--fond .bande__fond{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;border-radius:0}
.bande--fond::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at center,rgba(15,10,20,.68) 0%,rgba(15,10,20,.5) 70%,rgba(15,10,20,.6) 100%)}
.bande--fond .bande__texte{position:relative;z-index:1;text-align:center;
text-shadow:0 2px 14px rgba(0,0,0,.55)}
.bande--fond .bande__texte,.bande--fond h2,.bande--fond h3,.bande--fond h4,
.bande--fond p,.bande--fond li{color:#fff}

.bande h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 16px;font-weight:400}
.bande h3{font-size:clamp(18px,2vw,24px);margin:24px 0 10px}
.bande h4{font-size:19px;margin:18px 0 8px}
.bande p{margin:0 0 16px;color:var(--gris);font-size:15px;line-height:1.8}
.bande--fond h2:first-child,.bande__texte>*:first-child{margin-top:0}
.bande ul{margin:0 0 16px;padding-left:22px;color:var(--gris);font-size:15px;line-height:1.8}
.bande li{margin:0 0 6px}
.bande img{margin:20px 0;border-radius:12px}
.bande--split .bande__image img,.bande--fond .bande__fond{margin:0}
.bouton{display:inline-block;margin:6px 0 14px;padding:11px 22px;background:var(--orange);
color:#fff!important;border-radius:999px;font-weight:700;font-size:14px}
.bouton:hover{background:var(--orange-clair);text-decoration:none}
/* Vidéo : cadre 16/9 qui s'adapte à la largeur disponible. */
.video{position:relative;padding-top:56.25%;margin:22px 0;border-radius:12px;overflow:hidden;
background:#000}
/* L'accueil ne contient plus que la vidéo : sans cette règle, la bande gardait
   ses 52 px de marge haute et basse, soit une large bande blanche. */
/* Vidéo posée sur la bannière : largeur mesurée, ombre portée pour se détacher
   de la photo. */
.video--banniere{max-width:min(620px,86vw);margin:26px auto 0;
box-shadow:0 18px 50px rgba(0,0,0,.45);border-radius:14px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Colonnes côte à côte — galeries d'images, blocs de texte en vis-à-vis. */
.colonnes{display:grid;gap:clamp(18px,3vw,34px)}
.colonnes--2{grid-template-columns:repeat(2,1fr)}
.colonnes--3{grid-template-columns:repeat(3,1fr)}
.colonnes--4{grid-template-columns:repeat(4,1fr)}
.colonne>*:first-child{margin-top:0}
/* RECADRAGE 4/3, comme dans l'original : Webador servait toutes ses images
   avec crop=1.3333:1 — soixante-trois occurrences, aucune autre valeur.
   Sans lui, les photos gardaient leurs proportions natives et les colonnes
   n'avaient plus la même hauteur. */
.colonne img{margin:0;aspect-ratio:4/3;object-fit:cover;width:100%}
.colonne h2{font-size:clamp(18px,2vw,22px)}
/* Le bouton qui clôt une page est CENTRÉ dans l'original
   (`jw-btn-is-center`), pas aligné à gauche. */
.apres-colonnes{text-align:center;margin-top:26px}

/* Tableaux de tarifs */
.tarif{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14px;
border:none}
/* En-tête de tableau : bandeau ORANGE et texte blanc, comme dans l'original —
   c'est ce qui structure la page des tarifs et sépare les formules. */
.tarif th{background:var(--orange);text-align:left;padding:11px 15px;font-size:13.5px;
font-weight:400;color:#fff;border:none}
.tarif th:last-child,.tarif td:last-child{text-align:right;white-space:nowrap}
.tarif td{padding:9px 15px;border-bottom:1px solid #EFEBE6;color:var(--gris)}
.tarif tr:last-child td{border-bottom:none}
.tarif td:last-child{font-weight:400;color:var(--gris)}

/* Formulaire */
.form{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:8px 0 34px}
.form label{font-size:14px;font-weight:700;color:var(--gris);display:flex;flex-direction:column;gap:6px}
.form input,.form textarea{font:inherit;font-weight:400;padding:11px 13px;background:var(--sable);
border:1.5px solid var(--bord);border-radius:9px;color:var(--encre);outline:none;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--orange-clair)}
.form textarea{resize:vertical;min-height:120px}
.form button{align-self:flex-start;padding:12px 26px;background:var(--orange);border:none;
border-radius:999px;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.form button:hover{background:var(--orange-clair)}
.form button:disabled{background:var(--bord);color:#94A3B8;cursor:wait}
/* Champ piège : invisible pour l'humain, rempli par les robots. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.retour{font-size:14px;font-weight:600}
.retour.ok{color:#065F46}
.retour.err{color:#991B1B}
.carte{width:100%;height:300px;border:1px solid var(--bord);border-radius:12px;margin:0 0 20px}
/* Deux colonnes, comme dans l'original : le formulaire à gauche, le plan et les
   coordonnées à droite. La colonne vide du milieu de Webador n'était qu'un
   espacement — un `gap` fait la même chose. */
.contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);
max-width:1040px;margin:0 auto;padding:52px 20px}
.contact-col h2{margin-top:0}
.contact-col .form{max-width:none;margin:8px 0 0}
/* Icônes des réseaux, en pastilles rondes orange comme sur le site d'origine. */
.reseaux{display:flex;gap:10px;margin:14px 0 18px}
.reseaux a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:50%;background:var(--orange);color:#fff!important;text-decoration:none}
.reseaux a:hover{background:var(--orange-clair);text-decoration:none}

/* Pied de page */
footer{background:#fff;padding:28px 20px;text-align:center;color:#64748B;font-size:13px}
footer .legal{margin-top:8px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:12px}
footer .legal a{color:#64748B}

/* Le bouton et sa case ne servent QU'EN MOBILE : sur grand écran ils sont
   masqués et le menu s'affiche normalement. */
.menu-bascule{display:none}
.menu-bouton{display:none}

@media(max-width:1100px){
  .entete-in{flex-wrap:wrap;gap:0;padding:12px 16px}
  /* Menu ouvert : fond blanc et ombre, sur toutes les pages — y compris
     l'accueil, dont l'en-tête est transparent et flottant au repos. */
  .entete:has(.menu-bascule:checked){background:#fff;border-bottom:1px solid var(--bord);
    box-shadow:0 14px 30px rgba(0,0,0,.12)}
  .entete--sur-image:has(.menu-bascule:checked){position:sticky}
  .entete--sur-image:has(.menu-bascule:checked) .marque{color:var(--encre);text-shadow:none}

  /* Le bouton à trois barres, à droite du nom. */
  .menu-bouton{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:42px;height:38px;padding:8px 6px;cursor:pointer;
    border:1px solid var(--bord);border-radius:9px;background:#fff}
  /* Sur une bannière, le bouton se démarque de la photo. */
  .entete--sur-image .menu-bouton{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6)}
  .menu-bouton span{display:block;height:2.5px;background:var(--gris);border-radius:2px;
    transition:transform .2s,opacity .2s}
  /* Ouvert, les trois barres deviennent une croix. */
  .menu-bascule:checked ~ .menu-bouton span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-bascule:checked ~ .menu-bouton span:nth-child(2){opacity:0}
  .menu-bascule:checked ~ .menu-bouton span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* MENU FERMÉ PAR DÉFAUT. Auparavant il se dépliait en entier, sous-menus
     compris, et occupait tout l'écran avant qu'on ait vu la moindre ligne du
     site. */
  /* LE MENU DÉPLIÉ DOIT AVOIR UN FOND OPAQUE.
     Sur les pages à bannière, l'en-tête est transparent et en position absolue :
     le menu s'affichait alors PAR-DESSUS le contenu de la page, entrées et
     bouton mêlés au texte. Un panneau blanc pleine largeur règle le problème,
     quelle que soit la page. */
  /* LE PANNEAU RESTE DANS SA BOÎTE.
     Il débordait de 16 px de chaque côté pour occuper la pleine largeur, et
     l'écrêtage posé sur l'en-tête le rognait — le bouton d'inscription se
     retrouvait décalé sur la droite. C'est l'EN-TÊTE qui prend un fond blanc
     quand le menu s'ouvre, ce qui donne le même résultat sans débordement. */
  .nav{display:none;width:100%;margin:6px 0 0;padding:0 0 8px;flex:0 0 auto;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    flex-wrap:nowrap;gap:0;
    max-height:calc(100vh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Sur ce fond blanc, le texte du menu redevient sombre — il était blanc pour
     se poser sur la photo. */
  .entete--sur-image .nav a,.entete--sur-image .nav .parent{color:var(--gris);text-shadow:none}
  .entete--sur-image .nav .cta{color:#fff!important}
  .entete--sur-image .nav a:hover,.entete--sur-image .nav .parent:hover{background:transparent}
  /* REPLI pour les navigateurs sans `:has()`. Le fond blanc y est porté par le
     panneau lui-même : moins élégant qu'un en-tête plein, mais le menu reste
     lisible au lieu de flotter sur la photo. */
  .nav{background:#fff;border-top:1px solid var(--bord);padding:6px 0 8px}
  @supports selector(:has(*)){
    .nav{background:transparent;border-top:none}
  }
  .menu-bascule:checked ~ .nav{display:flex}

  /* Une entrée par ligne, pleine largeur : plus de colonnes qui s'entremêlent. */
  .nav>*{width:100%;border-top:1px solid #FBF0E4}
  /* Déplié, le menu dépassait l'écran : dix-sept entrées à 12 px de marge
     dépassent la hauteur d'un téléphone. On resserre, et le menu défile si
     besoin plutôt que de pousser la page. */
  /* Marges resserrées d'un cran : avec l'entrée Accueil, le menu déplié
     frôlait la hauteur d'un iPhone SE (587 px pour 591 disponibles). */
  .nav a,.nav .parent{padding:6px 4px;font-size:13.5px;border-radius:0}
  .nav a:hover,.nav .parent:hover{background:transparent}

  /* Les sous-menus restent visibles — sur un écran tactile, un survol n'existe
     pas — mais décalés et discrets, pour qu'on lise la hiérarchie. */
  .sous{position:static;display:block;border:none;box-shadow:none;
    padding:0 0 2px 14px;min-width:0}
  .sous a{padding:4px 4px;font-size:12px;color:#64748B;text-transform:uppercase}

  .nav>*:last-child{margin-left:0}
  .nav .cta{margin:10px 0;text-align:center;padding:11px!important;border-radius:999px}
  .nav>*:last-child{border-top:none}

  main{padding:0 0 12px}

  /* Sur un écran étroit, les deux colonnes s'empilent — l'image au-dessus du
     texte, y compris pour les bandes inversées : à la lecture verticale,
     l'ordre gauche/droite n'a plus de sens. */
  .bande--split{grid-template-columns:1fr}
  .bande--inverse .bande__image{order:0}
  /* PAS DE RECADRAGE SUR MOBILE. En pleine largeur, forcer une hauteur coupait
     les photos au mauvais endroit — le portrait de Cécile perdait le haut du
     visage. On affiche l'image entière : aucun recadrage, aucune surprise. */
  .bande--split .bande__image{min-height:0}
  .bande--split .bande__image img{position:static;width:100%;height:auto;object-fit:fill}
  .bande--split .bande__texte,.bande__texte{padding:32px 18px}
  /* Une seule colonne sur un écran étroit : le formulaire d'abord. */
  .contact-grille{grid-template-columns:1fr;gap:34px;padding:32px 18px}
  /* Sur un écran étroit : deux colonnes pour les galeries, une pour le texte. */
  .colonnes--3,.colonnes--4{grid-template-columns:repeat(2,1fr)}
  .colonnes--2{grid-template-columns:1fr}

  /* Tableaux de tarifs : marges réduites et texte un cran plus petit.
     Le libellé le plus long fait 35 caractères — il tient sur deux lignes
     dans les 270 px disponibles, à condition de ne pas gaspiller les côtés. */
  .tarif{font-size:13px}
  .tarif th,.tarif td{padding:8px 10px}
  .tarif th:first-child,.tarif td:first-child{width:auto}

  /* La carte du contact : plus basse, elle n'écrase plus le reste. */
  .carte{height:240px}

  /* Bannière image : un peu plus haute qu'un simple bandeau, sinon la photo
     n'est qu'une bande étroite sur un écran vertical. */
  .banniere--image img{height:clamp(200px,32vh,300px)}

  /* Bandeau orange et bouton de fin : marges resserrées. */
  .banniere--couleur .banniere-txt{padding:32px 18px}
  .apres-colonnes{margin-top:20px}

  /* Le diaporama d'accueil ne doit pas manger tout l'écran d'un téléphone.
     La règle ne vise QUE lui : appliquée à toutes les bannières, elle imposait
     380 px de haut aux bannières image dont la photo n'en fait que 300 — d'où
     un grand vide gris sous chacune. */
  /* Sur mobile, `svh` évite que la barre d'adresse du navigateur ne rogne la
     photo : `vh` compte l'écran entier, barre comprise. */
  .banniere:not(.banniere--image):not(.banniere--couleur){min-height:100svh}
}