/* Reem Kufi (OFL, licence dans assets/reem-kufi-OFL.txt), koufi d'ornement choisie par le directeur le 22/10/2026
   (registre de marque M-31), graisse 700, reduite aux lettres arabes du contenu (les arches de Cours) : inscrite ici, elle n'ajoute aucun fichier au
   paquet deploye. Apres un ajout de texte arabe, relancer site-public/police_arabe.py. */
@font-face {
  font-family: 'Reem Kufi';
  src: url('data:font/woff2;base64,d09GMgABAAAAABAUAA4AAAAALggAAA+3AAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGmIbjHgcigAGYD9TVEFUKgCBBgq4BKxdATYCJAOCLguBJAAEIAWDNgcgG8QmUVSzho3gR0J1mwfTuZqr9FqUoifW2WVO/o/nn9/v29rn3n9nBnGLUM3ShIy1RCMkIplO6Hj1qPp+4Lf5f869F4R7gSFDBccY82EUIGvsnALX6UJdlDVXpa699723LOM7dVHlolH3/ltE+GrJ889fsXPfn6ZVuEjCdF1w24EzzzROaN5fa73ZftufZjfU4QmSAiFRoxPT0wN/ujOhCXeYJwC4AUYNCApZRgIpRJWKitAnN+6MPHn2hHe37ffWJFhxrjIjS9MYY4qI7Ov9dXuPCYIMgH0IJGSBgsUgxcqAEAWsA7YAe4CTEAqFCGHCIZFgoZQ/QqRoMRISIursgiUMBiJ3L6ZYQXn9ml8AyvvrccWgRAGmnwYQBHIftUH5cBd1Bh6vt4XjwG8MzKy/LF04UJyIgAALlLpLS1Kaa1cXCUbMHhERQSJrvx+kgBQgUpqyI0M0gQwZEEHBHwXcBV3pTgL5iECgiPkBxwTyYNSdXi+9+aGAvzFeI9EihZMz+vMMU6gMD3ZSPTKj3lU78YUEcobZQ6FqaAH04IdMioXVllsLGsSNtHpqNIC7DRpjVmduSCsrj+GtmEOVamGUYvh+VDPQM1yWZHwbEDQ9GG/ViJwiF9I+0bP8aEFo2kI8GICEjs026oxphNFSGG1agHUjLoJsmdIy/Yaz+Y2BTHqOaa0SFCEQ1Ri7cFofVHvbgH8lxcuTie4vl4rwSDIRH90liikFE7ANFMRCiQGW+/dKkMbaeD2CYSxoyGI5W1V7Wd8gz9REqCEuP6xUL0sZmXzj2FUiahJUyeAcsjApMjn1ADvEdMq9guiqupwtDd8Oqkk5QO7EKk43faIHuVzxTutMCmDdIWExwbQo63yV5sNv/qVW26jeH+wWuxxwzBkXXdfqjkdeeAfQjr4oCDBLCSpAA6KKtpk+fjGB0xMgxEx9UGR5VS/CKsZhECZW825WAiYxh3JbEKWpy5Wy8/2gWp528dBpCBqxBzFPvpDDeFMjvMiAV4rU+r2y+bPEi1Unh5TXkxWHUVQWB5UqWSjGicQIEBccfgAP7eYeUV6QwLSDKwJCFtBmT2WIWk1R7rIrsCZXjMrbnnnq++zFFvR/m4M9iiV4I76AK5PmLJ90qnxWQ8gc3IKz8H7ysHeQ+71Z7GEED/gO/sCLTYNpDHnG/0FPG4rlwIeAF5UiQIW6UNzHwLiQbfw0BD1QPHzxQnKIRkASKkgvDaLe9stQHwXnggLWAJuAHcA+aDIQxUAUgNIuxVUUmpwrDWSxHLIkHFpkObQo/gVgEhRCZUtQFEEhEoxM0Mwpq4q99uOn5C12xaxbX4h3SkR8e72oFHrffpqCICwhZoiT3SDtr4Plwfq5xIOc/6PzIO+DavPDXgtHDodSIKCXDElKZOQynB0mMQLxf7uhKSiBQhFxY7LR9ShSmBNpzZsiiIgqKL521M161iSkX8tso9qBdrkrugEBhAjSkvARwKy3MDESpMiUrb8CBBQrAwgCgRCDIBaCIBaGIBYOKSENglYwgocwSI8QIBjBKDTvjxnDiY6SioqGjh5yh7pCPpAz1EsHyl/RzIsfPwZmPSEnYkpaHvQCGCE3SAd5QQzULdRQERvs3iJMlDhJ0iAxwm5wjQch0OACnTN3gX4Bz2aBUNCT68wpcj56igEaJIOsAAURLLySFByyvQaEASaMFLqEgJnxhAUgwv5JkNGqRQqh/ZSFfNiJvQi+oGQlKOiFl05SCHEzMAdjm6EAaFk3I8hQTzDpzl/esTMXbnzyJCMRfndgAcaS4JxPEJo+lcnaLZwE+foyCtJNLxdMXfzoBpBgOUzexGw2MQot9lDlBChqnfTQBxIguHHP0as4swTJ+UH7QCSFTvzrgZW4g1BUPynqNAIJJKuAZZA0QwBls0xI4/FawnDWpbEMGGLdOfbm02pIomqbMYTkNbge2bs3K4TSYHO2vh4JhB1J8zboQApYpvPXa+uJxQpqD6EDaZGDSSSUBFLIyhOk6EicUTW5jhCA+qls4Fq66lwwRwiToncFLtiZvcQ4OEE3Z/aU/6Vg9p2FwGlAfusBsAsFaydg3YUD20JNvD1iHAoAFARkkzgCUEAD1iGVklJW9+nJkYR0s8fwH4EjaESNmBE3Mkbm9BMee+PIQNqnOb38rQe/O/92/818ob+I//v06xMEWGNy6S6IlyFBIhB9Ae4Bj8H8MVjyB7wH7pY7eM6SQHqHAkSaHKAFLkINikDqUmoigC7VVxURsOAkxeg4mYi4IvZQR5ABql8gr95l0g4ymuK0Z96KGW6MltJU101CVaeEVzfnsdxjBSWjaPkyylFHHdJzCsp5dqhLU/LO0qC7TmR+3W8FJaEvxDtNmlJO8mVOFowQ1B3qzKu2QzK2sAwF1hxbanV2pzkaad0JMZTTBPSbKp1cIJ0qGbzysqP1FApYqrzxf5sGNzhIfLP8jZbOknR1paUNuWWb1kB+R5rPHGIq6utrM8Da777sXDvJMmwHoJFBliivq8MOyICcAWZwCdmqAFmwAtADlB0OCZhE44L922sRO4byHc1nzjEnuuSsgG1fK1bU7vZfvm2bO3uypYVhrHTVngYoP3rh7HnvBofD1jSzvdPXGClIZujd2mvNz6HtzFBRV8PYoTRKwSpmBGUuoBQZkCGzuqZ2t5Hd3mo55AixN7Z4t7WEHm1xRFhXrl231YWx0sgs3xSS9t+yV8G69/zmDUiyRLnD0drKIAN52B4rBRqltVe1V7UObba1MVxLC8g6s3NrsGI1XXUWjffdgFGxXfW/YgDYxudL+M3TDoJXrVOtaFTX1ymXroVyuWS4toew7EbHZMisDdoc1bQipSiFPKtMgwWs0Bpo3dAt/1VrVctWrVIur/eoIe7klYrH245XP4SwFCwyH580sGcAYrm1lCRMeWPSNcjMtcBGZTfSNgmnzWCIrK6kSRtRsWD/Y6i9E8101T5bW/V9RikJXbUFXdjapdNYsX6bK3u0BQ4mTHkqVkg9o3TVun5mZIANvTzfB8thR1q9fvNxAeyR7j9/uNM4dtVBhrHlIgtLDzTbSRaIGf1c63AOnqvfW8uNRgZybmCrw4BLIC/eHsfZbGML1nMY2HX/QTl2ZIesPbjk4UKSEWV7yKxSI6b/6hGSuvNIGt7Gv8x+I2p4+y5D36pjWHGc4Y5C+ZFufqwv29Dq19Tmv7nFt9Fh9WPV7ps2uK/ep69bq161l626iRW3NOhG7eth3HHX6TGv+iNQfhQ2DZ1hPJQ31NWHO0RvhFvhZgv6HQR3Fsa5DAgKAMGkK0L2selimAjZjsB1nPaI2t7+N+TFh6d65YqyXPqZFnDapV0JKw0XhjRlBeR3HiRMd/k3iN1ZlX4CKx4mBzXx0eW2+841NqqXufXdAZFg6iN5pe4kg4e6dC529CUtRW5Q21idxUXw/PPMaOS0oZI+JoAW/g6/coAhQ7LS5cgb3cTNf964vlRKvoLPnYNu9Id6cCtXsBv22AnsqrPu7f1LkVs53+u73+JesOnLreIreJh1fkt4epzb5w/5Px8vXxQ5M75frq1Hl4ZgrlWi/c1d55pxcp7XqKwuAyiwNpzTxnq7fxv2ySThJVKZ6K3iU1TzaIIjXZ4ucRK9ru0Zy50SOOZvX3AzL4e6CUr+Ij+sWduekq/hM5slN+0An8Gb+JXjKhNLxpTV7ZcmRhTkqhLCHV0j5EvixONUlTW6IfIi87hNJydM6Pv9s4UDJb/08uy2GpBi/IHS5jO0Ljs85+sh9RhOu7BHQFS8Ng1jtLCNX8wvnbE5dTA3kNfyqnIu/jgblzcaUgOntQ1GQ0raidGQHBiYYjTGGjQ1cNIPUgdyAY+bgbDG8rXye3iNOrxK5S9Ot4ayXjPUiR5RgSPCFZU3Sw8kR5nrbzvUXj4RCd7G1N5JWTFc7iR5sSqxe3Q/f0GrISUwIMVoDEhJCTQYzZNUSbvSKTj/64Gdd+XzMvzGNnn/wWl1T86HJvt7R0qj3AL06esfK8bcrHszyP/Hh9t/aNy9w/fpvd8oM3tJOa21d7ecId2B45t4cgXrOY7GY3GV7UHcqcK/HRvM+UbKD1K+2HXAeeIRTju6Ycz91evaI/a06ZhP7zZC7UWi9gx21VF3izu/5bTtIYM2dVG9gHuXPONUlbrk7s36ebz0eN3bQb4retGuX7oEuOdqdetTAl0veq+PnjcgeEp2TOiAPAMU8ot57XJvvHGjPsNQ75pGty2u/I+sDx4f5vf619iT4zNWDSLw8T2o54xF5vaoOeRa4wUKtLtkNTRKPyWdW0x6jt69ZKxiVjAHDwoLuN4DZ/65sNNMJaf9Mk047g3cIY3HwkbdE25rBHeWL2sOaOZub68XxiZ94K9Oz3jfkd1hvfnmMX7EpbIBd8b+thjfe/+75X9HqVuV66gqbdb9zENWP3a4/vYRcOzpY1aHFqD5f+NN8Tkjnj28P2bBAxXBjw7uD1jw8DRcpXJWTe8r6CB9UCGFumXXYxTaLvLY65/iFEaZIm73cOky29u3ltU1tVVJvlVLatZAfqLPal/f1T6+Tb6+TWUam0YTe2IHq9HYwKsg1aW3W0Sn3vtmzSXPfMTc0fyL6Pkpz0jCGYLB2BEM3EdCz2krqEWwlmN1/cFGeDEJgQB9GwHMienbLROxOHtw8qZRcFDuy1wsWoxzJ59XGlHXQlCCPoMmB9ZmDi5bZbse+mqlaXdlnU6pAuujAlRbsjDKmJahCo/YkFMArNyZyoHpnHEsIPAkfbqyoOs7dcgnaKbuf0KRuul2WrVjq6Ebm1qfWEEBUSf2WXbSDszr2KfNHahZtpFaTN+++Umc0GfqnaNNl0d3z+5cLJsH5z38ObnOH18AAQos7n8/MGhlyDcRSb4APLq7fwfwrktf/E9dSsfOngIMBEDAb+2aiorQWUPd62T3F9MOZpUgE6iTT72NzbQBL6mBWBmZaF3aBExvYOEgD9I4D3MB/1MT21mRIM0WSvCrUzM9zxRpktu11asemiqbE4C2NbSjxr2Uir6y6dNKXV1zZm6k9rDaXGpkuZzLFHolqyeOuegNxT6f3hSgNhyGrto/dd+mjtqX9mZqevKZEFhkQ8vmBKHoYW9LzEDCSQzgAaCyI4U92Qky57KTvDgGpaTZBdx9ySYkjxKhbdEeCkASPZ4LBkQxiVai1GRlRhpuhHF0zEyC9BDYO+aoqo5VAkOrZhoKTpHLPdl4w4x0Mkz8JUYZarB3IgWbH2eEEmXG0vGx18ApJbu2MDIabqRw5+MVMBisRBGjfIW8M8x1P1mpoYzKsqYINHoKvgylMMYZTm2uUL4yZgamqNNgkVIkihsttd2DXS9zZSOVKKbDPiuAtZr0WkUpUWgIEsB/B7MJAAAA') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/dm-sans-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/dm-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  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: 'Plus Jakarta Sans';
  src: url('../assets/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/plus-jakarta-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  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;
}

/*
 * Jetons. Toutes les couleurs viennent de lib/core/theme/app_palette.dart (M-16),
 * les rayons de app_radius.dart, les ombres de app_elevation.dart (M-24), les
 * durees et les courbes de app_mouvement.dart (gelees, DESIGN-GOV contrat E).
 * Propre au site, et seulement cela : l'echelle d'affiche (5 tailles) et les grands
 * espacements entre sections, multiples du jeton « respiration » (64).
 */
:root {
  color-scheme: light dark;
  /* Surfaces et encres, theme clair */
  --fond: #FFFFFF;            /* surfaceRaised */
  --toile: #F1EFF4;           /* surfaceCanvas */
  --sous: #F0EDF4;            /* surfaceSunken */
  --avant: #F7F5FE;           /* surfaceMiseEnAvant */
  --champ: #EEE6FA;           /* washAccent */
  --champ-encre: #4E2983;     /* washAccent, encre */
  --champ-fort: #DCCAFD;      /* surfaceActionDouce */
  --marque: #8652E6;          /* surfacePrimary, violet du logo */
  --sur-marque: #FFFFFF;
  --inverse: #211E28;         /* surfaceInverse */
  --sur-inverse: #F5F2FA;
  --sur-inverse-doux: #AEB1CE;/* inkMuted du theme sombre, pose sur l'inverse */
  --encre: #110E20;           /* inkStrong */
  --encre-douce: #655E70;     /* inkMuted */
  --encre-accent: #6538E4;    /* inkAccent */
  /* Bouton principal : la paire surfacePrimary (blanc sur violet, 4,81:1 au calcul WCAG), lisible sur tous les fonds lavande du site. */
  --action: #8652E6;
  --sur-action: #FFFFFF;
  --action-survol: #6538E4;   /* inkAccent */
  --sur-action-survol: #FFFFFF;
  --contour: #84798F;         /* borderStrong */
  --filet: #E3DEE9;           /* borderHairline (tableaux et champs seulement) */
  --pied: #211E28;
  --sur-pied: #F5F2FA;
  --sur-pied-doux: #AEB1CE;
  --ombre-1: 0 2px 10px rgb(33 30 40 / .04), 0 8px 29px -4px rgb(33 30 40 / .06);
  --ombre-2: 0 4px 15px rgb(33 30 40 / .08), 0 16px 47px -8px rgb(33 30 40 / .10);
  --ombre-3: 0 12px 38px rgb(33 30 40 / .22);
  --voile: rgb(0 0 0 / .32);
  /* Rayons (app_radius) */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;
  /* L'arche, le seul motif : un demi-cercle en haut (les rayons trop grands sont ramenes a la moitie de la largeur) */
  --arche: 9999px 9999px 0 0;
  /* Les polices du site, en un seul endroit : changer une police, c'est changer cette ligne (et son fichier, avec sa
     licence, dans assets/). Le reste de la feuille n'ecrit jamais un nom de police. */
  --police-titre: 'DM Sans', system-ui, sans-serif;
  --police-corps: 'Plus Jakarta Sans', system-ui, sans-serif;
  --police-arabe-ornement: 'Reem Kufi', sans-serif;
  /* Mouvement (app_mouvement) */
  --mv-retour: 100ms;
  --mv-micro: 120ms;
  --mv-apparition: 180ms;
  --mv-navigation: 220ms;
  --mv-echelon: 35ms;
  --mv-plafond: 400ms;
  --mv-entree: cubic-bezier(.215, .61, .355, 1);
  --mv-sortie: cubic-bezier(.55, .055, .675, .19);
  --mv-accentuee: cubic-bezier(.2, 0, 0, 1);
}
/* La courbe accentuee de l'app (ThreePointCubic) n'a pas d'equivalent cubic exact : linear() la suit a 0,004 pres. */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --mv-accentuee: linear(0 0%, .0069 2.93%, .0287 5.85%, .0693 8.78%, .1106 10.73%, .1685 12.68%, .2208 13.98%, .2904 15.28%, .3526 16.15%, .4746 17.45%, .5429 18.32%, .6182 19.62%, .6716 20.92%, .7286 22.87%, .7863 25.80%, .8424 30.19%, .8945 36.77%, .9401 46.65%, .9756 61.46%, .9967 83.68%, 1 100%); }
}
:root {
  /* Espacement (app_spacing) et page */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  --respire: clamp(56px, 8vw, 136px);
  --marge: 16px;
  --contenu: 1200px;
  --lecture: 68ch;
  --entete: 72px;
  /* Echelle d'affiche du site : cinq tailles */
  /* Cinq tailles (recettes 15 et 17) : affiche, section, sous-titre, texte, petit (17 px, notes et legendes comprises) ;
     les chiffres des prix a part. */
  --t-affiche: clamp(44px, 6.6vw, 96px);
  --t-titre: clamp(28px, 3.9vw, 56px);
  --t-moyen: clamp(20px, 1.95vw, 28px);
  --t-corps: clamp(18px, 0.25vw + 16px, 20px);
  --t-petit: 18px;
  font-family: var(--police-corps);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 600px) { :root { --marge: 24px; } }
@media (min-width: 1200px) { :root { --marge: 32px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16161E;          /* surfaceCanvas sombre (LT-THEME) */
    --toile: #16161E;
    --sous: #262534;          /* surfaceSunken sombre */
    --avant: #272734;         /* surfaceRaised sombre */
    --champ: #332643;         /* washAccent sombre */
    --champ-encre: #E8D8FF;
    --champ-fort: #2D2D3B;    /* surfaceMiseEnAvant sombre */
    --marque: #BA98FB;        /* surfacePrimary sombre */
    --sur-marque: #25113F;
    --inverse: #272734;
    --sur-inverse: #F5F2FA;
    --sur-inverse-doux: #AEB1CE;
    --encre: #F5F2FA;
    --encre-douce: #AEB1CE;
    --encre-accent: #C9AEFF;
    --action: #BA98FB;
    --sur-action: #25113F;
    --action-survol: #C9AEFF;
    --sur-action-survol: #25113F;
    --contour: #95899F;
    --filet: #32323F;
    --pied: #272734;
    --ombre-1: none;
    --ombre-2: 0 16px 47px -8px rgb(0 0 0 / .5);
    --ombre-3: none;
    --voile: rgb(0 0 0 / .56);
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--entete) + 16px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-size: var(--t-corps);
  line-height: 1.6;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
/* Anti-spam : l'arobase d'une adresse n'est pas dans la page ; sans script, la feuille la dessine (site.js la remet). */
.arobase::before { content: "@"; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  text-wrap: balance;
  font-variation-settings: 'opsz' 40;
}
h1 { font-size: var(--t-affiche); line-height: .98; letter-spacing: -0.02em; }
h2 { font-size: var(--t-titre); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: var(--t-moyen); line-height: 1.2; letter-spacing: -0.015em; }
/* Corps de texte : coupure ordinaire, qui remplit chaque ligne. Les espaces insécables
   (texte_html) tiennent le dernier mot et les petits mots ; « pretty » coupait trop tôt. */
p { text-wrap: wrap; max-width: 60ch; }
::selection { background: var(--champ-fort); color: var(--encre); }
:focus-visible { outline: 2px solid var(--encre-accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--marge); top: -100px; z-index: 50; padding: var(--e-3) var(--e-5); border-radius: var(--r-full); background: var(--encre); color: var(--fond); }
.skip-link:focus { top: var(--e-3); }

/* Le nom discret au-dessus du titre : le nom de la marque, en casse normale (PRODUCT.md). */
/* Le nom de la marque au-dessus du titre, seulement quand l'en-tete n'affiche que le symbole (telephone). */
.eyebrow { font-weight: 600; color: var(--champ-encre); margin-bottom: var(--e-4); font-size: var(--t-corps); }
@media (min-width: 600px) { .eyebrow { display: none; } }
.hero-intro { font-size: var(--t-moyen); line-height: 1.4; max-width: 32ch; margin-top: var(--e-6); }
.rassurance { margin-top: var(--e-5); font-size: var(--t-petit); color: var(--encre-douce); max-width: 46ch; }
.porte__phrase span { white-space: nowrap; }
/* Sur les ecrans bas, le ruban de la scene passe sous la phrase et le bouton contour : ils gardent le fond du champ. */
.porte .rassurance { width: fit-content; padding: var(--e-1) var(--e-2); margin-inline-start: calc(var(--e-2) * -1); border-radius: var(--r-xs); background: var(--champ); }
.porte .cta--secondary { background: var(--champ); }
.porte .cta--secondary:hover { background: var(--champ-fort); }

/* --- Illustrations (regles de base, avant les compositions qui les placent) ------------------------------------------------------------ */
.scene { position: relative; }
.scene img { width: 100%; height: auto; }
/* Le cadre d'une illustration ; quand elle a des calques, la partie qui bouge est posee exactement sur le fond. */
.scene__cadre { position: relative; display: block; }
.scene[data-anime] .scene__cadre { overflow: clip; }
.scene .scene__calque { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Gros plans : un cercle (la halqa du symbole), ouvert sur la lumiere de la salle. */
/* Le sol lavande d'un detail cadre est la depuis le debut : ce n'est pas un fond ajoute (directeur, 21/10). */
.scene--cercle .scene__cadre { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #EEE6FA; }
/* Un detail cadre ne depasse jamais la largeur de son fichier (--natif, pose par le build) : agrandi, il deviendrait flou. */
.section__figure .scene--cercle, .section__figure .scene--arche, .pleine__image .scene--cercle, .pleine__image .scene--arche { max-width: var(--natif, none); margin-inline: auto; }
.chapitres__image.scene--cercle > .scene__cadre { max-width: var(--natif, none); }
/* Un cercle en bande pleine reste un detail : 520 px au plus, 260 px au telephone. */
.pleine__image .scene--cercle { max-width: min(var(--natif, 520px), 520px); }
@media (max-width: 599px) { .pleine__image .scene--cercle { max-width: min(var(--natif, 260px), 260px); } }
.section__figure:has(.scene--cercle) { background: none; padding: 0; border-radius: 0; }
/* Details en pied : l'arche du symbole (le haut est un demi-cercle sur toute la largeur), ouverte sur la lumiere. */
.scene--arche .scene__cadre { aspect-ratio: 4 / 5; border-radius: 50% 50% 0 0 / 40% 40% 0 0; overflow: hidden; background: #EEE6FA; }
.section__figure:has(.scene--arche) { background: none; padding: 0; border-radius: 0; width: min(100%, 460px); }
/* Un rendu d'un autre style (images.json, taille « detail ») reste a la taille d'un detail : 280 px au telephone, 420 px ailleurs. */
.section__figure:has(.scene--detail) { width: min(100%, 280px); justify-self: center; margin-inline: auto; }
@media (min-width: 600px) { .section__figure:has(.scene--detail) { width: min(100%, 420px); } }
/* La manche de l'eleve ne s'arrete pas net : l'image s'efface sur ses bords gauche et bas. */
/* Les manches sortent par un vrai bord : le bord de l'ecran (haut de page) ou celui de la carte (etapes).
   Seule la fenetre des chapitres, sans bord visible, garde un fondu court. */
.chapitres__image[data-anime="mains"] .scene__cadre img { -webkit-mask: linear-gradient(90deg, transparent 0, #000 5%), linear-gradient(0deg, transparent 0, #000 5%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, #000 5%), linear-gradient(0deg, transparent 0, #000 5%); mask-composite: intersect; }
.chapitres__image[data-anime="mains"] { inset: 4% 4% 4% 0; }
/* La manche sort franchement par le bord (24 px au-dela) : un arret pile sur le bord se lirait comme une marge ratee. */
.entete-page:has(.scene[data-anime="mains"]) .entete-page__arche { justify-self: start; margin-inline-start: calc(var(--marge) * -1 - 24px); width: calc(100% + var(--marge) + 24px); }
.etape:has(.scene[data-anime="mains"]) { overflow: hidden; }
.etape .section__figure:has(.scene[data-anime="mains"]) { margin-inline-start: calc(var(--e-6) * -1); width: calc(100% + var(--e-6)); }
.scene__onde { position: absolute; left: calc(var(--zx) * 100%); top: calc(var(--zy) * 100%); width: calc(var(--zl) * 100%); height: calc(var(--zh) * 100%); pointer-events: none; }
.scene[data-onde] .scene__calque--tapis { visibility: hidden; }
/* Arreter le mouvement continu du tapis (WCAG 2.2.2) : un bouton dans l'illustration qu'il commande. */
.pause-anim { position: absolute; z-index: 3; inset-inline-start: var(--e-3); bottom: var(--e-3); display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--contour); border-radius: 50%; background: var(--fond); color: var(--encre); transition: background-color var(--mv-micro) var(--mv-entree); }
.porte__texte .pause-anim { position: static; margin-top: var(--e-6); }
.pause-anim:hover { background: var(--champ); }
.pause-anim svg { width: 18px; height: 18px; }
.pause-anim .pause-anim__lecture, .pause-anim[aria-pressed="true"] .pause-anim__pause { display: none; }
.pause-anim[aria-pressed="true"] .pause-anim__lecture { display: inline; }
/* Une seule regle pour la legende « Illustration » : petite, alignee sur le bord droit de son image. */

/* --- Boutons et liens : une seule forme, la pilule ------------------------- */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-8); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: var(--e-3) var(--e-6);
  border: 2px solid transparent; border-radius: var(--r-full);
  background: var(--action); color: var(--sur-action);
  font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background-color var(--mv-micro) var(--mv-entree), color var(--mv-micro) var(--mv-entree), transform var(--mv-retour) var(--mv-entree);
}
.cta:hover { background: var(--action-survol); color: var(--sur-action-survol); }
.cta:active { transform: scale(.98); }
.cta--secondary { background: transparent; color: var(--encre); border-color: var(--contour); }
.cta--secondary:hover { background: var(--champ); color: var(--encre); }
.lien-fleche { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; font-weight: 600; text-decoration: none; color: var(--encre); }
.lien-fleche > span { position: relative; }
.lien-fleche__fin { white-space: nowrap; }
.lien-fleche__fin svg { display: inline-block; vertical-align: -4px; margin-inline-start: var(--e-2); }
.lien-fleche > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--mv-apparition) var(--mv-entree); }
.lien-fleche svg { transition: transform var(--mv-micro) var(--mv-entree); }
.lien-fleche:hover > span::after { transform: scaleX(1); }
.lien-fleche:hover svg { transform: translateX(4px); }
.section-links { display: flex; flex-wrap: wrap; gap: 0 var(--e-8); margin-top: var(--e-6); }
.text-link { font-weight: 600; }

/* --- En-tete ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 40; view-transition-name: entete; background: color-mix(in srgb, var(--fond) 0%, transparent); transition: background-color var(--mv-apparition) var(--mv-entree), box-shadow var(--mv-apparition) var(--mv-entree), transform var(--mv-navigation) var(--mv-entree); }
.site-header[data-flotte] { background: var(--fond); box-shadow: var(--ombre-1); }
/* En descendant, l'en-tete s'efface ; il revient des qu'on remonte, ou des que le clavier y entre. */
.site-header[data-cache]:not(:focus-within) { transform: translateY(-100%); box-shadow: none; }
.site-header__inner { max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; min-height: var(--entete); padding-inline: var(--marge); display: flex; align-items: center; gap: var(--e-8); }
.site-header__brand { display: block; flex: 0 0 auto; }
.site-header__brand img { height: 44px; width: auto; }
.site-nav { display: flex; gap: var(--e-6); margin-inline-start: auto; }
.site-nav a { text-decoration: none; font-weight: 500; min-height: 48px; display: inline-flex; align-items: center; position: relative; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--mv-apparition) var(--mv-entree); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__connexion { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--e-5); border: 2px solid var(--contour); border-radius: var(--r-full); font-weight: 600; text-decoration: none; transition: background-color var(--mv-micro) var(--mv-entree); }
.site-header__connexion:hover { background: var(--champ); }
.mobile-menu { display: none; margin-inline-start: auto; }
.mobile-menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--e-3); min-height: 48px; padding-inline: var(--e-4); border-radius: var(--r-full); border: 2px solid var(--contour); font-weight: 600; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu__icone { position: relative; width: 18px; height: 12px; }
.mobile-menu__icone::before, .mobile-menu__icone::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--mv-apparition) var(--mv-entree); }
.mobile-menu__icone::before { top: 1px; }
.mobile-menu__icone::after { bottom: 1px; }
.mobile-menu[open] .mobile-menu__icone::before { transform: translateY(4px) rotate(45deg); }
.mobile-menu[open] .mobile-menu__icone::after { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu:not([open]) nav { display: none; }
.mobile-menu nav { position: absolute; left: var(--marge); right: var(--marge); top: calc(var(--entete) - 4px); display: grid; padding: var(--e-4); border-radius: var(--r-lg); background: var(--fond); box-shadow: var(--ombre-2); }
.mobile-menu nav a { display: flex; align-items: center; min-height: 56px; padding-inline: var(--e-4); border-radius: var(--r-md); text-decoration: none; font-family: var(--police-titre); font-size: var(--t-moyen); font-weight: 600; }
.mobile-menu nav a:hover { background: var(--champ); }

/* --- Accueil : la porte (premier ecran et scene signature) ------------------- */
.porte { position: relative; background: var(--champ); margin-top: calc(var(--entete) * -1); }
.porte__collant { position: relative; overflow: clip; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--e-6); padding: calc(var(--entete) + var(--e-10)) var(--marge) var(--e-16); max-width: none; }
.porte__texte { position: relative; z-index: 3; grid-column: 1 / span 7; align-self: center; padding-inline-start: max(0px, calc((100vw - var(--contenu)) / 2 - var(--marge))); }
.porte__texte h1 { font-size: clamp(44px, 5.4vw, 88px); max-width: 12ch; }
/* Petits telephones : le titre de l'accueil garde trois lignes au plus. */
@media (max-width: 380px) { .porte__texte h1 { font-size: 10.6vw; max-width: none; } }
.porte__arche { position: absolute; z-index: 0; inset-inline-end: 3vw; bottom: -14svh; width: min(44vw, 760px); aspect-ratio: .82; border-radius: var(--arche); background: var(--champ-fort); transform-origin: 50% 100%; }
.porte__scene { position: absolute; z-index: 1; inset-inline-end: -12vw; bottom: 3svh; width: 112vw; max-width: none; transform-origin: calc(var(--fx, .7) * 100%) calc(var(--fy, .5) * 100%); }
/* La legende du haut de l'accueil est posee dans la colonne du contenu, pas sur l'image qui deborde de l'ecran :
   alignee sur le bord droit du contenu, sous la scene ; elle s'efface quand on passe la porte. */
/* Le bas de la scene du haut s'efface au lieu de finir sur une coupe nette : le tapis et le sol se fondent dans la page. */
.porte__scene .scene__cadre { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.porte__cercle, .porte__phrase { display: none; }
.porte__vue { display: contents; }
@media (min-width: 840px) and (max-height: 760px) { .porte__scene { bottom: -11svh; } }

/* La scene animee n'existe que si JavaScript tourne, que l'ecran est large et que le mouvement est accepte. */
@media (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  .js .porte { height: 250svh; }
  .js .porte__collant { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .js .porte__arche { transform: scale(calc(1 + var(--z, 0) * 2.6)); }
  .js .porte__scene { transform: scale(calc(1 + var(--z2, 0) * 1.7)); will-change: transform; }
  .js .porte__texte { transform: translateY(calc(var(--z, 0) * -14svh)); opacity: calc(1 - var(--z, 0) * 3.6); }
  .js .porte[data-passee] .porte__texte, .js .porte:not([data-cercle]) .porte__phrase { visibility: hidden; }
  .js .porte__cercle { display: grid; place-items: center; position: absolute; inset: 0; z-index: 4; pointer-events: none; clip-path: circle(calc(var(--c, 0) * 150vmax) at 68% 56%); }
  .js .porte__disque { transition: border-radius var(--mv-navigation) var(--mv-entree); }
  [data-ambiance="violet"].js .porte[data-plein] .porte__disque { border-radius: 0 0 50% 50% / 0 0 120px 120px; }
  .js .porte__vue { transition: visibility 0s linear var(--mv-navigation); }
  .js .porte[data-plein] .porte__vue { transition-delay: 0s; }
  /* Piece pleine : la porte agrandie derriere ne se voit plus dans les coins de l'arrondi. */
  .js .porte[data-plein] .porte__vue { visibility: hidden; }
  .js .porte__vue { display: block; position: absolute; inset: 0; }
  .js .porte__disque { position: absolute; inset: 0; background: var(--fond); }
  .js .porte__halqa { position: relative; width: min(41vw, 74svh); margin-inline-start: 54vw; transform: scale(calc(1.18 - var(--c, 0) * .18)); }
  .js .porte__phrase { display: block; position: absolute; inset-inline-start: max(var(--marge), calc((100vw - var(--contenu)) / 2)); top: 50%; translate: 0 -50%; font-family: var(--police-titre); font-weight: 600; font-size: clamp(38px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -0.025em; color: var(--encre); opacity: var(--c, 0); transform: translateY(calc((1 - var(--c, 0)) * 16px)); }
  .js .porte__halqa::before { content: ''; position: absolute; inset: 4% 8% 2% 6%; border-radius: 50%; background: var(--champ); z-index: -1; }
}

/* --- Enonce : une phrase, des fenetres en arche dans la ligne ---------------- */
.enonce { padding: var(--respire) var(--marge); max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.enonce__texte { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-titre); line-height: 1.08; letter-spacing: -0.03em; }
.enonce__texte span { display: block; }
/* Au-dessus de 840 px : les deux phrases au centre, a la taille qui remplit la mesure (la plus longue fait 15,3 em,
   on divise par 16,4 pour garder une marge), plafonnee a la taille du titre de l'accueil : une taille d'affiche de
   moins ; la fenetre des chapitres suit de pres. */
@media (min-width: 840px) {
  .enonce { padding-bottom: 0; }
  .enonce__texte { font-size: var(--t-accueil); text-align: center; }
  .enonce__texte span { white-space: nowrap; }
}
/* Sous 840 px : une phrase par ligne, a la taille qui la fait tenir (la plus longue mesure 16,07 em), jamais un mot seul. */
@media (max-width: 839px) { .enonce__texte { font-size: min(var(--t-titre), calc((100vw - 2 * var(--marge)) / 16.4)); } .enonce__texte span { white-space: nowrap; } }

/* --- Chapitres : la porte reste, ceux qui viennent changent ------------------- */
p, li, dd { overflow-wrap: break-word; }
li, dd { text-wrap: wrap; }
/* Puces des encarts et des cartes de prix : pas de mot seul en fin de puce (« ne convient / pas. »). Lignes courtes, propres a ces listes. */
.fiche__lignes li { text-wrap: pretty; }
.appel__phrase { overflow-wrap: anywhere; }
.section__grille > *, .contact-ligne > *, .entete-page > *, .groupe > *, .faq-ouverte > * { min-width: 0; }
.chapitres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding: 0 var(--marge) var(--respire); max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.chapitres__fenetre { grid-column: 1 / span 6; position: sticky; top: calc(var(--entete) + 4svh); height: calc(100svh - var(--entete) - 8svh); display: none; }
.chapitres__pile { position: relative; height: 100%; border-radius: var(--arche); background: var(--champ); overflow: hidden; }
.chapitres__image { position: absolute; inset: 4%; display: flex; flex-direction: column; justify-content: center; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 16px)); transition: opacity var(--mv-navigation) var(--mv-entree), transform var(--mv-navigation) var(--mv-entree); }
.chapitres__image:first-child { --o: 1; }
.chapitres__image.scene--cercle > .scene__cadre { flex: none; align-self: center; width: min(100%, calc((100svh - var(--entete) - 8svh) * .92)); }
/* Les arches de la fenetre (rapport 4/5) : jamais plus larges que leur fichier, ni plus hautes que la fenetre. */
.chapitres__image.scene--arche > .scene__cadre { flex: none; align-self: center; width: min(100%, var(--natif, 100%), calc((100svh - var(--entete) - 8svh) * .92 * .8)); }
.chapitres__textes { grid-column: 1 / -1; }
.chapitre { padding-block: var(--e-16); }
.chapitre h2 { max-width: 20ch; margin-bottom: var(--e-6); font-size: var(--t-titre); }
.chapitre p { max-width: 46ch; }
.chapitre p + p { margin-top: var(--e-4); }
.chapitre__image-mobile { margin-top: var(--e-8); }
/* Les mains : la manche sort par le bord gauche de l'ecran, au lieu de finir coupee dans le vide. */
.chapitre__image-mobile:has(.scene[data-anime="mains"]) { margin-inline-start: calc(var(--marge) * -1); }
/* Sous 840 px, chaque image se pose juste au-dessus de son titre, alignee sur le texte ; les chapitres se suivent sans vide. */
@media (max-width: 839px) {
  .chapitre { display: flex; flex-direction: column; padding-block: var(--e-10); }
  .chapitre__image-mobile { order: -1; margin: 0 0 var(--e-6); }
}
.chapitre__image-mobile .scene { border-radius: var(--arche); background: var(--champ); padding: 12% 4% 4%; }
@media (min-width: 840px) {
  .chapitres__fenetre { display: block; }
  /* Le texte des chapitres part du meme bord que les autres paires de la page (colonne 7). */
  .chapitres__textes { grid-column: 7 / span 6; }
  .chapitre { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; }
  .chapitres { padding-bottom: var(--e-16); }
  /* Le dernier chapitre a la hauteur de la fenetre et se centre sur elle : quand la fenetre se decolle, son texte
     et son image sont alignes et quittent l'ecran ensemble, au lieu que l'image parte pendant qu'on lit. */
  .chapitre:last-child { min-height: calc(100svh - var(--entete) - 8svh); padding-block: 0; }
  .chapitre__image-mobile { display: none; }
  /* Les mains sortent par le coin de l'ecran : la manche file hors du bord gauche et son ourlet sous le bas de
     l'ecran, au lieu d'une petite image fondue au milieu du violet. La fenetre est collee pendant tout ce chapitre :
     ces deux bords sont toujours ceux de l'ecran. */
  [data-ambiance="violet"] .chapitres__pile { overflow: visible; }
  [data-ambiance="violet"] .chapitres__image[data-anime="mains"] { inset: auto auto -4svh calc(-1 * max(var(--marge), (100vw - var(--contenu)) / 2) - 24px); display: block; width: min(calc((100% + max(var(--marge), (100vw - var(--contenu)) / 2) + 24px) * 1.2), 130svh); translate: -15% 13%; }
  [data-ambiance="violet"] .chapitres__image[data-anime="mains"] .scene__cadre img { -webkit-mask: none; mask: none; }
}

/* --- Points : la puce est une petite arche ------------------------------------- */
.points { display: grid; gap: var(--e-3); margin-top: var(--e-6); }
.points li { display: flex; gap: var(--e-3); align-items: baseline; font-weight: 600; }
.puce { flex: 0 0 auto; width: .62em; height: .75em; border-radius: var(--arche); background: var(--marque); transform: translateY(.05em); }

/* --- Les tuiles qui grandissent --------------------------------------------- */
.pousse { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-10); }
.pousse__entete { grid-column: 1 / -1; }
.pousse__entete h2 { max-width: 16ch; }
.pousse__entete p { max-width: 52ch; margin-top: var(--e-4); }
.pousse__liste { grid-column: 1 / -1; display: grid; gap: var(--e-8); }
.pousse__tuile { border-radius: var(--arche); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 0 6% 6%; }
.pousse__etape--0 .pousse__tuile { background: var(--champ); height: 52vw; }
.pousse__etape--1 .pousse__tuile { background: var(--champ-fort); height: 66vw; }
.pousse__etape--2 .pousse__tuile { background: var(--marque); height: 82vw; }
/* Le cercle tient dans sa tuile, sous l'arrondi : il ne remonte jamais sur les liens au-dessus. */
.pousse__image { width: min(100%, 60vw); }
.pousse__etape--0 .pousse__image { width: min(100%, 36vw); }
.pousse__etape--1 .pousse__image { width: min(100%, 48vw); }
.pousse__tuile { position: relative; overflow: visible; }
/* La legende sort de l'arche : 8 px sous la tuile, a droite, dans l'espace du titre de l'etape. */
.pousse__image { position: static; }
.pousse__etape h3 { margin-top: var(--e-16); }
.pousse__etape p { margin-top: var(--e-2); max-width: 32ch; }
/* Au telephone, les etapes s'empilent : la montee des hauteurs ne se lit plus, les trois tuiles prennent la meme taille. */
@media (max-width: 599px) { .pousse__liste .pousse__etape .pousse__tuile { height: 64vw; } .pousse__liste .pousse__etape .pousse__image { width: min(100%, 46vw); } }
/* Au telephone, la legende « Illustration » d'une etape ne touche pas le titre qui suit. */
@media (max-width: 599px) { .etapes .etape .section__figure { margin-bottom: var(--e-16); } }
@media (min-width: 840px) {
  .pousse__entete { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .pousse__entete h2 { grid-column: 1 / span 6; }
  .pousse__corps { grid-column: 7 / -1; }
  .pousse__corps > p:first-child { margin-top: 0; }
  .pousse__liste { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--e-6); }
  .pousse__etape--0 { grid-column: 1 / span 4; }
  .pousse__etape--1 { grid-column: 5 / span 4; }
  .pousse__etape--2 { grid-column: 9 / span 4; }
  .pousse__etape--0 .pousse__tuile { height: 42svh; }
  .pousse__etape--1 .pousse__tuile { height: 53svh; }
  .pousse__etape--2 .pousse__tuile { height: 64svh; }
  /* Le detail tient dans sa tuile : il ne depasse jamais l'arche, meme dans la plus basse. */
  .pousse__image, .pousse__etape--0 .pousse__image, .pousse__etape--1 .pousse__image { width: min(100%, 34svh); }
  .pousse__liste { padding-top: 0; }
  .pousse__entete { position: relative; z-index: 1; }
  .pousse { grid-template-rows: auto auto; }
  .pousse__liste { margin-top: 0; }
  .pousse__liste { grid-template-rows: auto auto auto; row-gap: 0; }
  .pousse__etape { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
  .pousse__etape .pousse__tuile { align-self: end; }
}

/* --- Deux champs : enfants, adultes --------------------------------------- */
.deux-champs { padding-top: var(--e-16); }
.deux-champs__titre { padding-inline: var(--marge); max-width: calc(var(--contenu) + 2 * var(--marge)); margin: 0 auto var(--e-10); }
.deux-champs__grille { display: grid; gap: var(--e-4); padding-inline: var(--marge); max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.champ { position: relative; display: flex; flex-direction: column; min-height: 0; padding: var(--e-10) var(--e-6); overflow: hidden; border-radius: var(--r-lg); }
.champ h3 { font-size: var(--t-titre); line-height: 1.04; letter-spacing: -0.02em; }
.champ__public { margin-top: var(--e-4); max-width: 44ch; }
.champ__prix { margin-top: var(--e-8); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-3); }
.champ__montant { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-affiche); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.champ__periode { font-weight: 600; }
.champ--enfant { background: var(--champ-fort); color: var(--encre); }
.champ--adulte { background: var(--marque); color: var(--sur-marque); }
.deux-champs__pied { padding: var(--e-10) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.deux-champs__pied p { max-width: 60ch; }
/* Les deux prix se lisent en grand, sans carte : le chiffre porte la section, le public et ce que le prix comprend
   se posent dessous, en lignes courtes. */
.champ, .champ--enfant, .champ--adulte { padding: 0; border-radius: 0; overflow: visible; background: none; color: inherit; }
.champ h3 { font-size: var(--t-moyen); line-height: 1.2; letter-spacing: -0.015em; }
.champ__prix { margin-top: var(--e-6); column-gap: var(--e-4); }
.champ__montant { font-size: clamp(64px, 10.4vw, 150px); line-height: 1; letter-spacing: -0.04em; }
/* Empiles au telephone, les deux prix gardent un vrai ecart entre eux. */
@media (max-width: 599px) { .deux-champs__grille { row-gap: var(--e-16); } }
@media (min-width: 600px) {
  /* Les deux cartes partagent leurs lignes : titres, prix, public et listes commencent a la meme hauteur. */
  .deux-champs__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--e-6); }
  .champ { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-height: 0; padding: 0; }
  .champ h3 { align-self: end; }
  .deux-champs__grille { column-gap: var(--e-16); }
}

/* --- Bande sombre de l'accueil : le visage du directeur, sa phrase signee, puis les trois engagements ------------ */
.panneau { margin-top: var(--respire); padding: var(--respire) 0; background: var(--inverse); color: var(--sur-inverse); display: grid; row-gap: var(--e-10); }
.panneau h2 { color: var(--sur-inverse); max-width: 13ch; }
.panneau__depuis { margin-top: var(--e-6); font-family: var(--police-titre); font-size: var(--t-moyen); line-height: 1.25; font-weight: 500; max-width: 24ch; }
.panneau__in { display: grid; gap: var(--e-10); padding-inline: var(--marge); }
.panneau__photo { width: min(88vw, 520px); }
.panneau__promesses { list-style: none; display: grid; gap: var(--e-10); padding-inline: var(--marge); }
.panneau__promesses h3 { color: var(--sur-inverse); font-size: var(--t-moyen); line-height: 1.2; margin-bottom: var(--e-3); max-width: 16ch; }
.panneau__promesses p { max-width: 34ch; }
.panneau__promesses .panneau__lien { margin-top: var(--e-4); }
.panneau .cta--secondary { color: var(--sur-inverse); border-color: var(--sur-inverse-doux); }
.panneau .cta--secondary:hover { background: var(--sur-inverse); color: var(--inverse); }
.panneau .lien-fleche { color: var(--sur-inverse); }
.panneau .action-row { margin-top: 0; }
/* La signature sur la bande sombre garde les couleurs de la bande, quelle que soit l'ambiance de la page. */
.panneau .mot__nom { color: var(--sur-inverse); }
.panneau .mot__role { color: var(--sur-inverse-doux); }
@media (max-width: 839px) {
  /* Au telephone et sur tablette : le titre, puis le visage, puis sa phrase signee juste dessous. */
  .panneau__in { display: contents; }
  .panneau__tete, .panneau__citation, .panneau__in > .action-row { padding-inline: var(--marge); }
  .panneau__tete { order: 1; }
  .panneau__photo { order: 2; }
  .panneau__citation { order: 3; }
  .panneau__in > .action-row { order: 4; }
  .panneau__promesses { order: 5; margin-top: var(--e-6); }
}
/* Sur tablette, les trois engagements restent cote a cote, comme au bureau. */
@media (min-width: 600px) and (max-width: 839px) { .panneau__promesses { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-6); } }
@media (min-width: 840px) {
  /* Le visage cale au bord gauche, son haut a la hauteur du titre ; le texte a partir de la 7e colonne de la page.
     Dessous, les trois engagements cote a cote sur la grille de la page. */
  .panneau { grid-template-columns: minmax(0, calc(50vw + 12px - 120px)) minmax(0, 1fr); column-gap: 120px; row-gap: var(--e-16); align-items: start; padding-inline-end: max(var(--marge), calc((100vw - var(--contenu)) / 2)); }
  .panneau__photo { width: 100%; }
  .panneau__in { padding: 0; }
  .panneau__promesses { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-6); padding-inline: max(var(--marge), calc((100vw - var(--contenu)) / 2)) 0; }
}

/* --- Tuiles de questions (FAQ, aide) ------------------------------------------- */
.faq-ouverte { padding: var(--respire) var(--marge); max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; gap: var(--e-12); }
.faq-ouverte__intro > p { margin-top: var(--e-4); max-width: 44ch; }
.faq-ouverte__liste { list-style: none; display: grid; gap: var(--e-10); }
.faq-ouverte__question h3 { font-size: var(--t-moyen); line-height: 1.2; margin-bottom: var(--e-3); max-width: 24ch; }
.faq-ouverte__question p { max-width: 46ch; }
.liste-liens { margin-top: var(--e-6); display: grid; }
.questions { display: grid; gap: var(--e-2); }
.tuile { border-radius: var(--r-md); background: var(--sous); transition: background-color var(--mv-apparition) var(--mv-entree); }
.tuile summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 72px; padding: var(--e-4) var(--e-6); cursor: pointer; }
.tuile summary::-webkit-details-marker { display: none; }
.tuile summary h2, .tuile summary h3 { font-size: var(--t-corps); font-weight: 600; letter-spacing: 0; line-height: 1.35; font-family: var(--police-corps); }
.tuile__signe { position: relative; flex: 0 0 16px; height: 16px; }
.tuile__signe::before, .tuile__signe::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform var(--mv-apparition) var(--mv-entree); }
.tuile__signe::after { transform: rotate(90deg); }
.tuile[open] { background: var(--champ-fort); color: var(--encre); }
.tuile[open] .tuile__signe::after { transform: rotate(0); }
.tuile__corps { padding: 0 var(--e-6) var(--e-6); max-width: 64ch; }
.tuile__corps p + p { margin-top: var(--e-3); }
.tuile::details-content { block-size: 0; overflow: clip; transition: block-size var(--mv-plafond) var(--mv-accentuee), content-visibility var(--mv-plafond) allow-discrete; }
.tuile[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
@media (min-width: 840px) {
  .faq-ouverte__tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
  .faq-ouverte__tete h2 { grid-column: 1 / span 6; }
  .faq-ouverte__intro { grid-column: 7 / -1; }
  .faq-ouverte__intro > p:first-child { margin-top: 0; }
  .faq-ouverte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-12); }
}
.questions { max-width: calc(960px + 2 * var(--marge)); margin: 0 auto var(--respire); padding: var(--respire) var(--marge) 0; }
.questions .section-links { margin-top: var(--e-3); }

/* --- Bande d'appel : toute la bande est le lien ------------------------------ */
.appel { padding-top: var(--respire); }
.appel__lien { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 56svh; padding: var(--e-12) var(--marge) var(--e-6); background: var(--marque); color: var(--sur-marque); text-decoration: none; border-radius: 50% 50% 0 0 / 120px 120px 0 0; overflow: hidden; transition: background-color var(--mv-micro) var(--mv-entree), color var(--mv-micro) var(--mv-entree); }
.appel__lien:hover, .appel__lien:focus-visible { background: var(--champ-fort); color: var(--encre); }
.appel__lien:focus-visible { outline-offset: -6px; }
.appel--sobre .appel__lien { min-height: 0; grid-template-rows: auto; padding-bottom: var(--e-16); }
.appel__haut { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); max-width: calc(var(--contenu)); width: 100%; margin-inline: auto; padding-top: var(--e-10); text-align: center; justify-items: center; }
.appel__haut h2 { font-size: var(--t-titre); color: inherit; max-width: 100%; text-wrap: balance; }
.appel__phrase { font-size: var(--t-corps); max-width: 46ch; padding-inline: var(--e-2); }
.appel__bouton { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-6); min-height: 52px; padding-inline: var(--e-6); border-radius: var(--r-full); background: var(--sur-marque); color: var(--marque); font-weight: 600; font-size: var(--t-corps); transition: transform var(--mv-retour) var(--mv-entree); }
.appel__lien:hover .appel__bouton svg { transform: translateX(4px); }
.appel__bouton svg { transition: transform var(--mv-micro) var(--mv-entree); }

/* --- Pages interieures : haut de page --------------------------------------- */
/* La scene porte deja l'arche du symbole (le livre, la porte ouverte) : on ne l'enferme pas dans une
   seconde fenetre. Elle se pose en grand sur le bas du champ, a droite ou a gauche selon la page. */
.entete-page { position: relative; overflow: clip; margin-top: calc(var(--entete) * -1); padding: calc(var(--entete) + var(--e-10)) var(--marge) 0; display: grid; gap: var(--e-10); align-items: center; }
.entete-page--lavande { background: var(--champ); }
.entete-page--blanc { background: var(--fond); }
.entete-page__texte { position: relative; z-index: 2; }
.entete-page h1 { font-size: clamp(40px, 4.6vw, 68px); max-width: 19ch; }
.entete-page__texte--long h1 { font-size: clamp(32px, 8.2vw, 44px); max-width: 22ch; }
/* Les titres longs tiennent en deux lignes sans couper apres un article (mesure : « votre enfant, dès 6 ans » fait 10,5 em). */
@media (min-width: 840px) { .entete-page__texte--long h1 { font-size: clamp(36px, 4.6vw, 66px); } }
.entete-page .hero-intro { font-size: clamp(18px, 1.5vw, 22px); max-width: 36ch; }
.entete-page__suite .hero-intro { margin-top: 0; }
.entete-page--document { row-gap: var(--e-6); }
.entete-page--document h1 { font-size: clamp(28px, 8vw, 40px); }
.entete-page__arche { position: relative; z-index: 1; width: min(100%, 560px); justify-self: center; }
/* Tablette : l'illustration du haut prend toute la largeur du cadre (la regle vient apres la regle de base). */
@media (min-width: 600px) and (max-width: 839px) { .entete-page__arche, .entete-page--document .entete-page__arche { width: 100%; } }
.entete-page__image { transform: translateY(calc(var(--par, 0) * -1px)); }
/* La legende passe sous le cadre, a 8 px, alignee a droite : jamais posee sur l'image. */
.entete-page--sobre { min-height: 0; padding-bottom: var(--e-12); background: var(--fond); }
.entete-page--sobre h1 { max-width: 22ch; }
.entete-page__ornement { position: absolute; inset-inline-end: 6vw; top: 50%; translate: 0 -46%; width: clamp(120px, 16vw, 240px); opacity: .14; pointer-events: none; }
@media (min-width: 840px) {
  .entete-page { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding-inline: max(var(--marge), calc((100vw - var(--contenu)) / 2)); min-height: min(100svh, 940px); align-items: end; }
  .entete-page__texte { grid-column: 1 / span 6; grid-row: 1; align-self: center; }
  .entete-page__arche { grid-column: 7 / -1; grid-row: 1; justify-self: end; width: min(100%, calc((100svh - var(--entete) - var(--e-10)) * .86)); }
  .entete-page--gauche .entete-page__texte { grid-column: 7 / -1; }
  .entete-page--gauche .entete-page__arche { grid-column: 1 / span 6; justify-self: start; }
  .entete-page--sobre { min-height: 0; align-items: center; padding-bottom: var(--e-16); }
  .entete-page--sobre .entete-page__texte { grid-column: 1 / span 8; }
  /* Document : le titre traverse la page, la phrase et l'action dessous, la scene en bas du cote oppose. */
  .entete-page--document { min-height: 0; row-gap: var(--e-8); }
  .entete-page--document .entete-page__texte { grid-column: 1 / -1; grid-row: 1; align-self: end; }
  .entete-page--document .entete-page__texte h1 { font-size: clamp(40px, 5vw, 76px); max-width: 24ch; }
  .entete-page--document .entete-page__suite { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .entete-page--document .entete-page__arche { grid-column: 8 / -1; grid-row: 2; width: 100%; }
  /* Panorama : le titre et sa phrase sur une ligne, la scene sur toute la largeur du contenu dessous. */
  .entete-page--libre { min-height: 0; row-gap: var(--e-12); }
  .entete-page--libre .entete-page__texte { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: var(--e-6); }
  .entete-page--libre .entete-page__texte > * { grid-column: 9 / -1; }
  .entete-page--libre .entete-page__texte > h1 { grid-column: 1 / span 8; grid-row: 1 / span 3; max-width: none; font-size: clamp(40px, 5vw, 76px); }
  .entete-page--libre .hero-intro { font-size: clamp(18px, 1.5vw, 22px); margin-top: 0; }
  .entete-page--libre .action-row { margin-top: 0; }
  .entete-page--libre .entete-page__arche { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .entete-page--libre:has(.scene[data-anime="mains"]) .entete-page__arche { margin-inline-start: calc(-1 * max(var(--marge), (100vw - var(--contenu)) / 2) - 24px); width: calc(100% + max(var(--marge), (100vw - var(--contenu)) / 2) + 24px); }
  .entete-page--libre .entete-page__image img { max-height: 78svh; object-fit: contain; object-position: center bottom; }
  .entete-page--libre.entete-page--droite .entete-page__image img { object-position: center bottom; }
  .entete-page--libre.entete-page--gauche .entete-page__image img { object-position: left bottom; }
}

/* --- Sections editoriales --------------------------------------------------- */
/* Sans image : le titre tient sa colonne pendant la lecture. Avec image : le texte et la scene
   alternent de cote d'une section a l'autre, pour que la page ne penche jamais d'un seul cote. */
.section { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.section__grille { display: grid; gap: var(--e-6); }
.section__titre h2, .section__texte h2 { max-width: 18ch; }
.section__texte h2 { margin-bottom: var(--e-6); }
.section__texte > p + p { margin-top: var(--e-4); }
.section__figure { position: relative; width: min(100%, 600px); border-radius: var(--arche); background: var(--champ); padding: 14% 5% 0; }
.section--figure .section__figure { margin-top: var(--e-6); }
.section__figure--panorama { width: 100%; background: none; padding: 0; border-radius: 0; }
.section__corps { max-width: var(--lecture); }
.section__corps > p + p { margin-top: var(--e-4); }
@media (min-width: 840px) {
  .section__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .section__titre { grid-column: 1 / span 6; position: sticky; top: calc(var(--entete) + var(--e-6)); align-self: start; }
  .section__corps { grid-column: 7 / span 6; }
  .section--large .section__titre { grid-column: 1 / span 5; }
  .section--large .section__corps { grid-column: 6 / span 7; }
  /* Les fiches de la decision prennent toute la largeur, sous leur titre. */
  .section:has(.fiche + .fiche) .section__titre { grid-column: 1 / -1; grid-row: 1; position: static; }
  .section:has(.fiche + .fiche) .section__corps { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .section--figure .section__grille { align-items: center; }
  .section--figure .section__texte { grid-column: 1 / span 6; grid-row: 1; }
  .section--figure .section__figure { grid-column: 7 / -1; grid-row: 1; justify-self: end; margin-top: 0; }
  .section--figure-gauche .section__texte { grid-column: 7 / -1; }
  .section--figure-gauche .section__figure { grid-column: 1 / span 6; justify-self: start; }
  .section--large.section--figure .section__texte { grid-column: 1 / span 7; }
  .section--large.section--figure .section__figure { grid-column: 8 / -1; }
  .section--large.section--figure-gauche .section__texte { grid-column: 6 / -1; }
  .section--large.section--figure-gauche .section__figure { grid-column: 1 / span 5; }
  .section--figure .section__figure--panorama { grid-column: 7 / -1; }
  .section--figure-gauche .section__figure--panorama { grid-column: 1 / span 7; }
  .section--figure-gauche:has(.section__figure--panorama) .section__texte { grid-column: 8 / -1; }
}
/* Tablette : une scene en largeur (la classe vue du dessus) passe sous son texte, a toute la largeur de la colonne. */
@media (min-width: 600px) and (max-width: 839px) {
  .section--figure:has(.section__figure--panorama) .section__grille { display: block; }
  .section--figure:has(.section__figure--panorama) .section__figure--panorama { width: 100%; margin-top: var(--e-10); }
}
/* Tablette : le texte et sa scene restent cote a cote, la scene ferme la marge. Les tableaux restent pleine largeur. */
@media (min-width: 600px) and (max-width: 839px) {
  .section--figure:not(.section--large) .section__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: center; }
  .section--figure:not(.section--large) .section__texte { grid-column: 1 / span 7; grid-row: 1; }
  .section--figure:not(.section--large) .section__figure { grid-column: 8 / -1; grid-row: 1; margin-top: 0; justify-self: end; }
  .section--figure-gauche:not(.section--large) .section__texte { grid-column: 6 / -1; }
  .section--figure-gauche:not(.section--large) .section__figure { grid-column: 1 / span 5; justify-self: start; }
}
.site-main > .section:last-of-type, .site-main > .contacts:last-child, .site-main > .lecture:last-child, .site-main > .questions:last-child { padding-bottom: var(--respire); }

/* Bande pleine : le titre, la grande illustration au centre, le texte en deux colonnes dessous */
.section--pleine { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; gap: var(--e-10); }
.pleine__tete h2 { max-width: 20ch; }
.pleine__image .scene { width: min(100%, calc(72svh * var(--ratio, 1))); max-width: var(--natif, none); margin-inline: auto; }
.pleine__image .scene { position: relative; }
.pleine__corps { display: grid; gap: var(--e-8); }
.pleine__texte > p + p { margin-top: var(--e-4); }
.pleine__texte p { max-width: 58ch; }
@media (min-width: 840px) {
  .section--pleine { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-12); }
  .pleine__tete { grid-column: 1 / span 8; }
  .pleine__image { grid-column: 1 / -1; }
  .pleine__corps { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .pleine__texte { grid-column: 1 / -1; columns: 2; column-gap: var(--e-12); }
  .pleine__texte > * { break-inside: avoid; }
  .pleine__corps--deux .pleine__texte { columns: auto; }
  .pleine__corps--deux .pleine__texte { grid-column: 1 / span 5; }
  .pleine__plus { grid-column: 1 / span 8; }
  .pleine__corps--deux .pleine__plus { grid-column: 7 / -1; }
  /* Bande sans texte courant (Tarifs, « Une classe, un enseignant attitre ») : titre, image et tableau sur un meme axe. */
  .section--pleine:not(:has(.pleine__texte)) .pleine__tete { grid-column: 3 / span 8; text-align: center; }
  .section--pleine:not(:has(.pleine__texte)) .pleine__tete h2 { margin-inline: auto; }
  .section--pleine:not(:has(.pleine__texte)) .pleine__plus { grid-column: 3 / span 8; }
}
[data-ambiance="violet"] .pleine__image { position: relative; }

/* Parcours des bases : quatre arches qui montent, l'ordre se lit a la hauteur */
.section--parcours { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; gap: var(--e-10); }
.parcours__tete h2 { max-width: 18ch; margin-bottom: var(--e-6); }
.parcours__tete p { max-width: 58ch; }
.parcours__tete p + p { margin-top: var(--e-4); }
.parcours { list-style: none; display: grid; gap: var(--e-3); }
.parcours__etape { display: flex; align-items: flex-end; border-radius: var(--r-lg); padding: var(--e-8) var(--e-5); background: var(--sous); font-family: var(--police-titre); font-weight: 600; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.15; }
.parcours__etape:nth-child(2) { background: var(--champ); }
.parcours__etape:nth-child(3) { background: var(--champ-fort); }
.parcours__etape:nth-child(4) { background: var(--marque); color: var(--sur-marque); }
@media (min-width: 840px) {
  .section--parcours { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .parcours__tete { grid-column: 1 / span 7; }
  .parcours { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; column-gap: var(--e-4); }
  .parcours__etape { border-radius: var(--arche); padding: 0 var(--e-6) var(--e-8); }
  .parcours__etape:nth-child(1) { min-height: 220px; }
  .parcours__etape:nth-child(2) { min-height: 290px; }
  .parcours__etape:nth-child(3) { min-height: 360px; }
  .parcours__etape:nth-child(4) { min-height: 430px; }
}
[data-ambiance="violet"] .parcours__etape:nth-child(1) { background: #4E2983; }
[data-ambiance="violet"] .parcours__etape:nth-child(2) { background: #8652E6; }
[data-ambiance="violet"] .parcours__etape:nth-child(3) { background: #BA98FB; color: #25113F; }

/* Deux sections de texte cote a cote : deux champs, du plus profond au plus clair */
.groupe { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; gap: var(--e-4); }
.carte h2 { font-size: var(--t-moyen); line-height: 1.12; max-width: 20ch; margin-bottom: var(--e-6); }
.carte p + p { margin-top: var(--e-3); }
.carte .points, .carte .liste-liens { margin-top: var(--e-6); }
@media (min-width: 840px) {
  .groupe { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
  .carte { grid-column: span 6; }
  .carte h2 { font-size: max(26px, var(--t-moyen)); margin-bottom: var(--e-8); }
  .groupe--3 .carte { grid-column: span 4; }
}
@media (min-width: 840px) {
  .groupe--pile .carte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .groupe--pile .carte > * { grid-column: 7 / -1; }
  .groupe--pile .carte > h2 { grid-column: 1 / span 5; grid-row: 1 / span 6; margin-bottom: 0; }
}

/* Fiches de la decision du 18/10 : les textes tels quels, en deux champs */
.fiches { display: grid; gap: var(--e-4); margin-top: var(--e-6); align-items: stretch; }
.fiche { border-radius: var(--r-lg); padding: var(--e-8) var(--e-6); background: var(--sous); }
.fiche:nth-child(2) { background: var(--champ); }
.fiche h3 { margin-bottom: var(--e-4); }
.fiche__lignes { list-style: none; display: grid; gap: var(--e-3); }
.fiche__lignes li { padding-inline-start: 1.4em; position: relative; }
.fiche__lignes li::before { content: ''; position: absolute; inset-inline-start: 0; top: .5em; width: .6em; height: .75em; border-radius: var(--arche); background: currentColor; opacity: .55; }
@media (min-width: 840px) { .fiches:has(.fiche + .fiche) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fiche { padding: var(--e-10) var(--e-8); } }
/* Les encarts restent mot pour mot ; seule leur mise en page change : la ligne du prix se lit en grand, sans puce,
   comme le chiffre d'une affiche, et les autres lignes respirent davantage. */
.fiche__lignes { gap: var(--e-4); }
.fiche__lignes li:nth-child(2) { padding-inline-start: 0; margin-block: var(--e-2) var(--e-4); font-family: var(--police-titre); font-weight: 600; font-size: var(--t-titre); line-height: 1.05; letter-spacing: -0.03em; }
.fiche__lignes li:nth-child(2)::before { content: none; }
/* Cote a cote, les deux lignes de prix s'alignent : la premiere ligne de chaque encart reserve deux lignes. */
@media (min-width: 840px) { .fiches:has(.fiche + .fiche) .fiche__lignes li:first-child { min-height: calc(2lh); } }
[data-ambiance="violet"] .fiche { background: #4E2983; }
[data-ambiance="violet"] .fiche:nth-child(2) { background: #8652E6; }

/* Bande d'image entre deux sections */
.bande-image { position: relative; margin: var(--respire) auto 0; padding-inline: var(--marge); max-width: 1440px; }
.bande-image--arche .scene { width: min(100%, 720px); margin-inline: auto; border-radius: var(--arche); background: var(--champ); padding: 16% 5% 0; }
.bande-image--large { padding: 0; max-width: none; background: var(--champ); overflow: clip; }
.bande-image--large .scene { width: min(1500px, 120vw); margin-inline: auto; padding-block: var(--e-16); }
.bande-image--large .scene__cadre { translate: calc(var(--pan, 0) * 1px) 0; }
@media (max-width: 839px) { .bande-image--large .scene { width: 100%; padding-block: var(--e-10) var(--e-12); } .bande-image--large .scene__cadre { translate: none; } }
.bande-image--cercle .scene { width: min(86vw, 720px); margin-inline: auto; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--champ); padding: 6%; }
.bande-image--cercle .scene__cadre { width: 92%; }
.bande-image--large .scene { position: static; }
.bande-image__texte { margin-top: var(--e-8); }
.bande-image__phrase { font-family: var(--police-titre); font-weight: 600; font-size: max(22px, var(--t-moyen)); line-height: 1.1; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.bande-image__sous { margin-top: var(--e-4); max-width: 44ch; }
.bande-image--large .bande-image__texte { padding-inline: var(--marge); }
@media (min-width: 840px) {
  .bande-image:has(.bande-image__phrase):not(.bande-image--large) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: center; max-width: calc(var(--contenu) + 2 * var(--marge)); }
  .bande-image:has(.bande-image__phrase):not(.bande-image--large) .bande-image__texte { grid-column: 1 / span 6; grid-row: 1; margin-top: 0; }
  .bande-image:has(.bande-image__phrase):not(.bande-image--large) .scene { grid-column: 7 / -1; grid-row: 1; width: min(100%, 720px); }
  .bande-image--large .bande-image__texte { position: absolute; z-index: 1; top: var(--e-16); inset-inline-start: max(var(--marge), calc((100vw - var(--contenu)) / 2)); margin: 0; padding: 0; }
}

/* Etapes : l'ordre se lit a la taille, sans numeros */
.etapes { display: grid; gap: var(--e-3); padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; counter-reset: etape; }
.etape { border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md); padding: var(--e-8) var(--e-6); display: flex; flex-direction: column; justify-content: flex-end; }
.etape h2 { font-size: var(--t-moyen); line-height: 1.2; margin-bottom: var(--e-4); }
.etape .section__figure { width: 100%; margin: 0 0 var(--e-6); background: none; padding: 0; border-radius: 0; }
.etape p + p { margin-top: var(--e-3); }
.etape:nth-child(1) { background: var(--sous); }
.etape:nth-child(2) { background: var(--champ); }
.etape:nth-child(3) { background: var(--champ-fort); }
.etape:nth-child(4) { background: var(--marque); color: var(--sur-marque); }
@media (min-width: 840px) {
  /* Deux cartes par rangee, de meme hauteur. */
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--e-4); }
  .etape { border-radius: 200px var(--r-lg) var(--r-lg) var(--r-lg); padding: var(--e-8); }
  .etape .section__figure { aspect-ratio: auto; }
  .etape .section__figure .scene { width: 100%; }
  .etape .etape__corps { font-size: var(--t-corps); }
}
/* L'image au-dessus du texte, a toutes les largeurs : a cote de l'image, le texte n'avait que 250 px (quatre mots
   par ligne) ; dessous, il prend toute la carte (45 a 55 signes). Les images ont la meme taille : les titres s'alignent. */
@media (min-width: 600px) {
  .etape { display: flex; flex-direction: column; justify-content: flex-start; }
  /* L'arche au centre de la carte, a la taille du plus petit fichier (380 px) : pas de vide a cote d'elle. */
  .etape .section__figure { width: min(100%, 380px); margin: 0 auto var(--e-16); }
  .etape h2 { align-self: stretch; padding-top: 0; }
  .etape .etape__corps { max-width: 56ch; }
}

/* Lecture longue : textes juridiques, protection des enfants, accessibilite */
.lecture { display: grid; gap: var(--e-10); padding: var(--e-12) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.lecture__sommaire { font-size: var(--t-petit); padding: var(--e-5); border-radius: var(--r-md); background: var(--sous); }
@media (min-width: 600px) and (max-width: 839px) { .lecture__sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); } }
.lecture__sommaire p { font-weight: 700; margin-bottom: var(--e-3); }
.lecture__sommaire ol { display: grid; gap: var(--e-1); }
.lecture__sommaire a { display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-sm); text-decoration: none; color: var(--encre-douce); transition: background-color var(--mv-micro) var(--mv-entree), color var(--mv-micro) var(--mv-entree); }
.lecture__sommaire a:hover { background: var(--sous); color: var(--encre); }
.lecture__sommaire a[aria-current="true"] { background: var(--champ); color: var(--encre); font-weight: 600; }
.lecture__texte { max-width: var(--lecture); }
.lecture__section + .lecture__section { margin-top: var(--e-16); }
.lecture__section h2 { font-size: var(--t-moyen); line-height: 1.2; margin-bottom: var(--e-4); }
.lecture__section p + p { margin-top: var(--e-3); }
@media (min-width: 840px) {
  .lecture { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .lecture__sommaire { grid-column: 10 / -1; grid-row: 1; position: sticky; top: calc(var(--entete) + var(--e-6)); align-self: start; padding: 0; background: none; }
  .lecture__texte { grid-column: 1 / span 8; grid-row: 1; }
}

/* Contacts : un sommaire d'adresses, sans cartes. Le service a gauche, l'adresse en grand a droite. */
.contacts { display: grid; gap: var(--e-12); padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.contact-ligne { display: grid; gap: var(--e-3); }
.contact-ligne h2 { font-size: var(--t-moyen); line-height: 1.2; }
.contact-ligne .section-links { margin-top: var(--e-2); }
.contact-ligne .lien-fleche > span { font-size: var(--t-moyen); font-family: var(--police-titre); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .contact-ligne { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: baseline; }
  .contact-ligne h2 { grid-column: 1 / span 4; }
  .contact-ligne__corps { grid-column: 5 / -1; }
}
@media (min-width: 840px) {
  .contacts { gap: var(--e-16); }
  .contact-ligne { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: baseline; }
  .contact-ligne h2 { grid-column: 1 / span 4; }
  .contact-ligne__corps { grid-column: 5 / -1; }
}

/* --- Tableaux de prix, avis, notes ------------------------------------------ */
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--e-6); border-radius: var(--r-md); overflow: hidden; background: var(--sous); font-variant-numeric: tabular-nums; font-size: var(--t-corps); }
.price-table caption { text-align: start; font-weight: 700; padding-bottom: var(--e-3); }
.price-table th, .price-table td { padding: var(--e-4) var(--e-5); text-align: start; vertical-align: top; }
.price-table thead th { font-size: var(--t-petit); color: var(--encre-douce); font-weight: 600; background: var(--sous); }
.price-table tbody tr:nth-child(odd) { background: var(--avant); }
.price-table tbody th { font-weight: 500; }
.price-table td { font-weight: 700; }
.price-note { margin-top: var(--e-3); font-size: var(--t-petit); color: var(--encre-douce); }
.observation { margin-top: var(--e-4); padding: var(--e-6); border-radius: var(--r-md); background: var(--sous); }
.avis-note { color: var(--marque); letter-spacing: .1em; font-size: var(--t-moyen); }
.preview-note { margin-top: var(--e-6); font-size: var(--t-petit); color: var(--encre-douce); }

/* --- Simulateur ------------------------------------------------------------- */
.simulator { width: min(560px, calc(100% - 2 * var(--marge))); max-height: calc(100dvh - 2 * var(--marge)); overflow: auto; padding: var(--e-8); border: 0; border-radius: var(--r-lg); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-3); }
.simulator::backdrop { background: var(--voile); }
.simulator[open] { animation: entree-feuille var(--mv-apparition) var(--mv-entree); }
.simulator h2 { font-size: var(--t-moyen); margin-block: var(--e-2) var(--e-4); }
.simulator > p { color: var(--encre-douce); font-size: var(--t-petit); }
.simulator__close { display: grid; place-items: center; margin-inline-start: auto; width: 48px; height: 48px; border: 2px solid var(--contour); border-radius: 50%; background: transparent; }
.simulator__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-6); }
.simulator__fields label, .simulator__champ { display: grid; gap: var(--e-2); font-size: var(--t-petit); font-weight: 600; }
.simulator__fields input, .simulator__fields select { width: 100%; min-height: 52px; padding: var(--e-3) var(--e-4); border: 2px solid transparent; border-radius: var(--r-sm); background-color: var(--sous); }
.simulator__fields input:focus, .simulator__fields select:focus { outline: none; border-color: var(--encre-accent); }
.pas { display: grid; grid-template-columns: 52px 1fr 52px; gap: var(--e-2); }
.pas input { text-align: center; }
.pas button { min-height: 52px; border: 2px solid var(--contour); border-radius: var(--r-sm); background: transparent; color: inherit; font-size: 22px; font-weight: 600; cursor: pointer; }
.pas button:focus-visible { outline: 3px solid var(--encre-accent); outline-offset: 2px; }
.simulator__fields label:has(input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--e-3); align-self: end; min-height: 52px; cursor: pointer; }
.simulator__fields input[type="checkbox"] { appearance: none; position: relative; flex: none; width: 52px; height: 30px; min-height: 0; padding: 0; border: 2px solid var(--contour); border-radius: 999px; background: var(--fond); cursor: pointer; transition: background-color var(--mv-micro) var(--mv-entree); }
.simulator__fields input[type="checkbox"]::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); transition: transform var(--mv-micro) var(--mv-entree); }
.simulator__fields input[type="checkbox"]:checked { background: var(--action); border-color: var(--action); }
.simulator__fields input[type="checkbox"]:checked::before { transform: translateX(22px); background: var(--sur-action); }
.simulator__fields input[type="checkbox"]:focus-visible { outline: 3px solid var(--encre-accent); outline-offset: 2px; }
@media (forced-colors: active) {
  .simulator__fields input[type="checkbox"]::before { background: CanvasText; }
  .simulator__fields input[type="checkbox"]:checked { background: Highlight; border-color: Highlight; }
  .simulator__fields input[type="checkbox"]:checked::before { background: HighlightText; }
}
.simulator__result > p + p { margin-top: var(--e-3); }
.simulator__legende { margin-top: var(--e-8) !important; font-weight: 600; }
.simulator__eleves { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.simulator__eleves li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); row-gap: 2px; align-items: center; padding: var(--e-3) var(--e-4); border-radius: var(--r-sm); background: var(--fond); }
.simulator__eleve { font-weight: 600; }
.simulator__calcul { grid-column: 1; font-size: var(--t-petit); color: var(--encre-douce); }
.simulator__eleves strong { grid-column: 2; grid-row: 1 / span 2; font-family: var(--police-titre); font-weight: 600; font-size: var(--t-moyen); white-space: nowrap; }
.simulator__prix { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-affiche); line-height: 1; letter-spacing: -0.02em; }
.simulator__prix small { display: block; margin-top: var(--e-3); font-size: var(--t-corps); font-weight: 600; letter-spacing: 0; }
.simulator__result { margin-top: var(--e-6); }
.simulator__note { margin-top: var(--e-4); font-size: var(--t-petit); color: var(--encre-douce); }
.simulator > .cta { margin-top: var(--e-6); }
/* Le simulateur dans la page des tarifs : un outil pose sur la page, pas une feuille. */
.simulator--page { width: auto; max-width: calc(var(--contenu) + 2 * var(--marge)); max-height: none; overflow: visible; margin: var(--respire) auto 0; padding: var(--e-10) max(var(--marge), var(--e-8)); border-radius: var(--r-lg); background: var(--sous); color: var(--encre); box-shadow: none; }
.simulator--page h2 { font-size: var(--t-titre); }
.simulator--page .simulator__fields input:not([type="checkbox"]), .simulator--page .simulator__fields select { background-color: var(--fond); border-color: var(--contour); }
@media (min-width: 840px) {
  .simulator--page { margin-inline: max(var(--marge), calc((100vw - var(--contenu)) / 2)); padding: var(--e-12) var(--e-12); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-content: start; }
  /* Les champs a gauche, le resultat a droite : on voit le prix changer en remplissant. */
  .simulator--page > * { grid-column: 1 / span 6; }
  .simulator--page > .simulator__result { grid-column: 8 / -1; grid-row: 1 / span 4; margin-top: 0; align-self: start; }
  .simulator--page > .simulator__note, .simulator--page > .cta { grid-column: 8 / -1; justify-self: start; }
  .simulator--page .simulator__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.simulator__fields select { appearance: none; padding-inline-end: var(--e-12); background-repeat: no-repeat; background-position: right var(--e-4) center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2325113F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ambiance="violet"] .simulator__fields select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.insecable { white-space: nowrap; }
@keyframes entree-feuille { from { opacity: 0; transform: translateY(16px); } }

/* --- Pied de page --------------------------------------------------------------- */
.site-footer { background: var(--pied); color: var(--sur-pied); padding: var(--e-16) var(--marge) var(--e-8); position: relative; overflow: hidden; }
/* Rideau : la page glisse et decouvre le pied de page, deja en place dessous. Aucun mouvement ajoute,
   seulement l'ordre des couches ; reserve aux ecrans ou le pied tient en entier. */
@media (min-width: 840px) and (min-height: 820px) {
  .site-main { position: relative; z-index: 1; background: var(--fond); }
  .site-footer { position: sticky; bottom: 0; z-index: 0; }
}
.site-footer__inner { position: relative; max-width: var(--contenu); margin-inline: auto; display: grid; gap: var(--e-6); font-size: var(--t-petit); }
.site-footer .brand img { width: 150px; }
.footer-identity { display: flex; align-items: center; }
.footer-title { font-weight: 700; font-size: var(--t-corps); }
.pied-volet > summary { list-style: none; }
.pied-volet > summary::-webkit-details-marker { display: none; }
.site-footer ul { display: grid; }
.site-footer a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-contacts { gap: var(--e-3); }
.footer-contacts strong { display: block; }
.footer-contacts a { display: grid; gap: 2px; align-content: center; min-height: 0; color: var(--sur-pied-doux); }
.footer-contacts a strong { color: var(--sur-pied); }
.footer-contacts__adresse { white-space: nowrap; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); }
/* Volet legal : les pages legales, puis la societe, son adresse et les deux pages Facebook, en petit. */
.pied-legal { display: grid; gap: var(--e-3); }
.pied-societe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-6); color: var(--sur-pied-doux); }
.pied-societe p, .pied-societe address { margin: 0; font-style: normal; }
.pied-societe p > span:not(:last-child)::after { content: ' ·'; }
.pied-societe address span:not(:last-child)::after { content: ','; }
.pied-societe a { min-height: 32px; color: var(--sur-pied-doux); text-decoration: underline; }
.site-footer .site-footer__inner .footer-bottom { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: 0; color: var(--sur-pied-doux); font-size: 16px; }
.footer-bottom span { white-space: nowrap; }
/* Bureau : le logo et les pages ; les quatre adresses ; les pages legales, la societe et Facebook ; la langue et
   l'auteur du site. Les volets restent ouverts et leur titre s'efface (chaque navigation garde son nom). */
@media (min-width: 1100px) {
  .site-footer { padding-top: var(--e-12); padding-bottom: var(--e-8); }
  .site-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-5); }
  .pied-volet > summary { display: none; }
  .footer-identity { grid-column: 1 / span 2; }
  .pied-volet--liens { grid-column: 3 / -1; align-self: center; }
  .pied-volet--liens ul { display: flex; flex-wrap: wrap; justify-content: end; gap: 0 var(--e-6); }
  .pied-volet--liens a { color: var(--sur-pied); }
  .pied-volet--contacts, .pied-volet--legal, .footer-bottom { grid-column: 1 / -1; }
  .site-footer .footer-contacts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4) var(--e-10); }
  .site-footer .footer-contacts a { font-size: 16px; }
  .site-footer .pied-societe { font-size: 16px; }
}
/* Sous 1100 px : le logo, trois volets fermes (ouverts sans script et a l'impression), une ligne pour l'auteur. */
@media (max-width: 1099px) {
  .pied-volet > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; cursor: pointer; font-size: 18px; }
  .pied-volet > summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .2s var(--courbe-sortie, ease-out); }
  .pied-volet[open] > summary::after { transform: rotate(45deg); }
  .pied-volet[open] > :last-child { padding-bottom: var(--e-4); }
  .site-footer__inner > .pied-volet + .pied-volet { margin-top: calc(-1 * var(--e-6)); }
  .pied-volet--liens ul, .footer-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
  .pied-volet--liens a, .footer-legal a { white-space: nowrap; }
  .footer-contacts { gap: var(--e-2); }
  .site-footer .pied-societe { display: grid; gap: var(--e-1); font-size: 16px; }
}
/* Tablette : le logo a gauche, les trois volets a droite. */
@media (min-width: 600px) and (max-width: 1099px) {
  .site-footer { padding-top: var(--e-12); }
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--e-8); }
  .footer-identity { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: var(--e-2); }
  .pied-volet { grid-column: 2; }
  .footer-bottom { grid-column: 1 / -1; }
}
/* Telephone : plus serre. */
@media (max-width: 599px) {
  .site-footer { padding: var(--e-10) var(--marge) var(--e-6); }
  .site-footer .brand img { width: 140px; }
  .footer-legal a { font-size: 15px; min-height: 32px; }
  .pied-volet--liens a { min-height: 36px; }
  .footer-contacts a { font-size: 16px; }
}

/* --- Pages d'etat : introuvable, desinscription (la porte et sa lumiere, scene_porte.py) ------------------- */
.etat { position: relative; min-height: 100svh; display: grid; align-content: center; gap: var(--e-8); padding: var(--e-6) var(--marge) var(--e-12); max-width: var(--contenu); margin-inline: auto; }
.etat__marque { order: -2; display: block; width: 168px; justify-self: start; }
.etat__marque img { display: block; width: 100%; height: auto; }
.etat h1 { font-size: var(--t-titre); line-height: 1.08; text-wrap: balance; }
.etat p { margin-top: var(--e-4); max-width: 46ch; }
.etat__scene { display: grid; justify-items: center; }
.etat__scene > .pl { grid-area: 1 / 1; }
.pl { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
/* Desinscription : la porte reste fermee tant qu'on n'a rien confirme ; elle s'ouvre quand c'est fait. */
.pl:nth-of-type(2) { display: none; }
[data-etat="ok"] .pl:nth-of-type(1) { display: none; }
[data-etat="ok"] .pl:nth-of-type(2) { display: block; }
.etat [hidden] { display: none; }
.etat form.action-row { margin-top: var(--e-8); }
.etat button.cta { cursor: pointer; font: inherit; font-weight: 600; line-height: 1.2; min-height: 52px; }
@media (max-width: 839px) { .etat__scene { order: -1; } .etat__scene .pl { max-width: 340px; } .etat { gap: var(--e-4); align-content: start; } }
@media (min-width: 840px) { .etat { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--e-16); } .etat__marque { grid-column: 1 / -1; position: absolute; top: var(--e-8); } .etat__texte { grid-column: 1; grid-row: 1; } .etat__scene { grid-column: 2; grid-row: 1; } }
/* La lumiere respire, tres lentement (7 s) ; sans mouvement accepte, elle reste fixe. */
@media (prefers-reduced-motion: no-preference) {
  .pl__faisceau { animation: pl-respire 7s ease-in-out infinite; }
  .pl__halo { animation: pl-respire 5s ease-in-out infinite; }
}
@keyframes pl-respire { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

/* --- Responsive : en-tete ------------------------------------------------------- */
@media (max-width: 839px) {
  :root { --entete: 64px; }
  .site-nav, .site-header__connexion { display: none; }
  .mobile-menu { display: block; }
  .site-header__brand img { height: 32px; }
  .porte__collant { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .porte__texte { display: contents; }
  .porte__scene { order: 1; }
  .porte .rassurance, .porte__texte .pause-anim { order: 2; }
  .porte .rassurance { margin-top: var(--e-6); }
  .porte__cercle { order: 3; display: grid; gap: var(--e-6); margin: var(--e-10) calc(var(--marge) * -1) 0; padding: var(--e-12) var(--marge) var(--e-16); border-radius: 0 0 50% 50% / 0 0 64px 64px; background: var(--champ); }
  /* Centree comme au bureau, a la taille du titre quand elle tient : chaque vers reste sur une ligne (le plus long
     mesure 9,9 em), donc 33 px a 390 px et la taille du titre (57 px) a 768 px. */
  .porte__phrase { display: block; text-align: center; font-family: var(--police-titre); font-weight: 600; font-size: min(clamp(44px, 7.4vw, 62px), calc((100vw - 2 * var(--marge)) / 10.5)); line-height: 1.04; letter-spacing: -0.02em; }
  .porte__arche { display: none; }
  .porte__scene { position: relative; width: 150vw; max-width: none; margin-inline-start: -50vw; margin-top: var(--e-6); bottom: 0; }
}
@media (max-width: 599px) {
  .site-header__brand img { height: 36px; }
  .simulator__fields { grid-template-columns: 1fr; }
  .simulator { padding: var(--e-5); }
  .action-row .cta { flex: 1 1 100%; }
}

@property --et1 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --et2 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --et3 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --et4 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --et5 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

/* --- Mouvement : entrees des sections (JS seulement, et si le mouvement est accepte) --- */
@media (prefers-reduced-motion: no-preference) {
  /* Entrees : 220 ms, echelon 35 ms, rang plafonne a 5 (motion.js) : 395 ms au plus, sous le plafond de 400. */
  .js [data-revele] { opacity: 0; transform: translateY(16px); transition: opacity var(--mv-navigation) var(--mv-entree), transform var(--mv-navigation) var(--mv-entree); transition-delay: calc(var(--rang, 0) * var(--mv-echelon)); }
  .js [data-revele].est-visible { opacity: 1; transform: none; }
  .js [data-revele-enfants] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--mv-navigation) var(--mv-entree), transform var(--mv-navigation) var(--mv-entree); transition-delay: calc(var(--rang, 0) * var(--mv-echelon)); }
  .js [data-revele-enfants].est-visible > * { opacity: 1; transform: none; }
  .js .entete-page__arche { clip-path: inset(100% -30% 0 -30% round 9999px 9999px 0 0); animation: porte-ouvre 1 both var(--mv-plafond) var(--mv-accentuee); }
  .js .scene.est-ouverte img, .js [data-revele] .scene img { clip-path: inset(0 0 0 0); }
  /* Images de section : batie par etages, de gauche a droite, en 360 ms au plus. */
  .js .section__figure[data-revele] { opacity: 1; transform: none; }
  /* Par etages : cinq bandes du masque s'ouvrent de gauche a droite, 220 ms + 4 x 35 ms = 360 ms. */
  .js .section__figure[data-revele] .scene__cadre {
    --et1: 0%; --et2: 0%; --et3: 0%; --et4: 0%; --et5: 0%;
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / var(--et1) 20.4% no-repeat, linear-gradient(#000 0 0) 0 25% / var(--et2) 20.4% no-repeat, linear-gradient(#000 0 0) 0 50% / var(--et3) 20.4% no-repeat, linear-gradient(#000 0 0) 0 75% / var(--et4) 20.4% no-repeat, linear-gradient(#000 0 0) 0 100% / var(--et5) 20.4% no-repeat;
    mask: linear-gradient(#000 0 0) 0 0 / var(--et1) 20.4% no-repeat, linear-gradient(#000 0 0) 0 25% / var(--et2) 20.4% no-repeat, linear-gradient(#000 0 0) 0 50% / var(--et3) 20.4% no-repeat, linear-gradient(#000 0 0) 0 75% / var(--et4) 20.4% no-repeat, linear-gradient(#000 0 0) 0 100% / var(--et5) 20.4% no-repeat;
    transition: --et1 var(--mv-navigation) var(--mv-accentuee), --et2 var(--mv-navigation) var(--mv-accentuee) var(--mv-echelon), --et3 var(--mv-navigation) var(--mv-accentuee) calc(2 * var(--mv-echelon)), --et4 var(--mv-navigation) var(--mv-accentuee) calc(3 * var(--mv-echelon)), --et5 var(--mv-navigation) var(--mv-accentuee) calc(4 * var(--mv-echelon));
  }
  .js .section__figure.est-visible .scene__cadre { --et1: 100%; --et2: 100%; --et3: 100%; --et4: 100%; --et5: 100%; }
  /* Les mains de l'eleve montent jusqu'au Coran au fil du defilement (--m : 1 ecartees, 0 au contact). */
  .js .scene[data-anime="mains"] .scene__calque--mains { transform: translate(calc(var(--m, 0) * -4.5%), calc(var(--m, 0) * 3.7%)); }
  .js .ligne { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
  .js .ligne__in { display: block; transform: translateY(105%); transition: transform var(--mv-navigation) var(--mv-accentuee); transition-delay: calc(var(--rang, 0) * var(--mv-echelon)); }
  .js .est-dit .ligne__in { transform: none; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: var(--mv-micro) var(--mv-sortie) both sortie-page; }
  ::view-transition-new(root) { animation: var(--mv-navigation) var(--mv-entree) both entree-page; }
  ::view-transition-group(entete), ::view-transition-old(entete), ::view-transition-new(entete) { animation: none; }
}
@keyframes sortie-page { to { opacity: 0; } }
@keyframes porte-ouvre { to { clip-path: inset(-30% -30% 0 -30% round 9999px 9999px 0 0); } }
@keyframes entree-page { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cta:active { transform: none; }
}


/* --- Ambiance violette ------------------------------------------------------------
   Essai demande par le directeur le 21/10/2026 : le violet en fond, une lumiere et une ombre douces en degrade,
   les illustrations qui flottent sans fenetre, un halo qui suit la souris, le texte et le logo en blanc.
   Toutes les teintes sont des jetons de l'app : #8652E6 (surfacePrimary), #6538E4 (inkAccent),
   #4E2983 (encre de surfacePrimary), #25113F (encre de surfacePrimary sombre), #BA98FB, #E8D8FF, blanc.
   Le cahier visuel interdit le degrade : derogation demandee par le directeur, inscrite au registre (O-16). */
:root[data-ambiance="violet"] {
  color-scheme: dark;
  background: #6538E4;
  --fond: #6538E4; --toile: #6538E4; --sous: #4E2983; --avant: #8652E6;
  --champ: #8652E6; --champ-encre: #E8D8FF; --champ-fort: #8652E6;
  --marque: #FFFFFF; --sur-marque: #4E2983;
  --inverse: #25113F; --sur-inverse: #F5F2FA; --sur-inverse-doux: #E8D8FF;
  --encre: #FFFFFF; --encre-douce: #F5F2FA; --encre-accent: #FFFFFF;
  --action: #FFFFFF; --sur-action: #4E2983; --action-survol: #E8D8FF; --sur-action-survol: #25113F;
  --contour: #E8D8FF; --filet: #8652E6;
  --pied: #25113F; --sur-pied: #F5F2FA; --sur-pied-doux: #E8D8FF;
  --ombre-1: 0 8px 29px -4px rgb(37 17 63 / .35);
  --ombre-2: 0 16px 47px -8px rgb(37 17 63 / .45);
  --ombre-3: 0 12px 38px rgb(37 17 63 / .5);
  --voile: rgb(37 17 63 / .6);
  /* La lumiere vient d'en haut a gauche, l'ombre se pose en bas a droite. */
  --degrade:
    radial-gradient(110% 70% at 10% -10%, rgb(134 82 230 / .95) 0%, rgb(134 82 230 / 0) 62%),
    radial-gradient(85% 65% at 95% 110%, rgb(78 41 131 / .9) 0%, rgb(78 41 131 / 0) 66%),
    radial-gradient(55% 45% at 100% 0%, rgb(37 17 63 / .32) 0%, rgb(37 17 63 / 0) 70%),
    #6538E4;
}
[data-ambiance="violet"] body { background: transparent; font-weight: 500; }
[data-ambiance="violet"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--degrade); }
.halo { display: none; }
[data-ambiance="violet"] .halo { display: block; position: fixed; z-index: -1; left: -480px; top: -480px; width: 960px; height: 960px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .11), rgb(255 255 255 / .04) 55%, rgb(255 255 255 / 0)); transform: translate(var(--hx, 72vw), var(--hy, 28vh)); }
/* Le contenu laisse voir la lumiere ; le rideau du pied de page est retire (il demande un contenu opaque). */
[data-ambiance="violet"] .site-main { background: transparent; position: static; }
[data-ambiance="violet"] .site-footer { position: relative; }
[data-ambiance="violet"] .site-header[data-flotte] { background: var(--degrade); background-attachment: fixed; }
[data-ambiance="violet"] .porte,
[data-ambiance="violet"] .entete-page--lavande,
[data-ambiance="violet"] .entete-page--blanc,
[data-ambiance="violet"] .entete-page--sobre,
[data-ambiance="violet"] .bande-image--large,

[data-ambiance="violet"] .porte .rassurance,
[data-ambiance="violet"] .porte .cta--secondary { background: transparent; }
[data-ambiance="violet"] .porte .cta--secondary:hover { background: #8652E6; }
/* On passe la porte et on arrive dans la piece eclairee : le cercle s'ouvre sur la lumiere de la salle. */
[data-ambiance="violet"].js .porte__disque { background: #EEE6FA; }
[data-ambiance="violet"].js .porte__phrase { color: #25113F; }
@media (max-width: 839px) { [data-ambiance="violet"] .porte__cercle { background: #EEE6FA; color: #25113F; } }
/* Les illustrations flottent, comme dans les affiches de reference : ni fenetre ni puits de lumiere derriere elles,
   seulement le fond eclaire et une ombre portee dessous. */
[data-ambiance="violet"] .porte__arche,
[data-ambiance="violet"] .chapitres__pile,
[data-ambiance="violet"] .chapitre__image-mobile .scene,
[data-ambiance="violet"] .bande-image--arche .scene,
[data-ambiance="violet"] .bande-image--cercle .scene,
[data-ambiance="violet"].js .porte__halqa::before { background: none; }
[data-ambiance="violet"] .section__figure { background: none; padding: 6% 0 0; }
[data-ambiance="violet"] .section__figure::after,
[data-ambiance="violet"] .entete-page__arche::after { content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -1%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(37 17 63 / .5), rgb(37 17 63 / 0)); }
[data-ambiance="violet"] .entete-page--libre .entete-page__arche::after, [data-ambiance="violet"] .entete-page__arche:has(.scene--cercle, .scene--arche)::after { display: none; }
[data-ambiance="violet"] .section__figure--panorama::after { display: none; }
[data-ambiance="violet"] .section__figure:has(.scene--cercle, .scene--arche)::after, [data-ambiance="violet"] .section__figure--noms::after { display: none; }
/* Etapes, tuiles et prix : du plus profond au plus clair, comme une progression. */
[data-ambiance="violet"] .etape:nth-child(3) { background: #BA98FB; color: #25113F; }
[data-ambiance="violet"] .pousse__etape--0 .pousse__tuile { background: #4E2983; }
[data-ambiance="violet"] .pousse__etape--1 .pousse__tuile { background: #8652E6; }
[data-ambiance="violet"] .pousse__etape--2 .pousse__tuile { background: #BA98FB; }
[data-ambiance="violet"] .tuile[open] { background: #8652E6; }
[data-ambiance="violet"] .panneau { background: #25113F; }

/* --- Hauts de page qui ouvrent sur le sujet de la page -------------------------------
   Familles garde sa porte ; Cours s'ouvre sur les quatre arches du parcours, Tarifs sur ses deux prix,
   Comment ca marche sur ses etapes, l'Academie sur la boucle. */
.entete-page--haut-texte, .entete-page--haut-parcours, .entete-page--haut-prix { min-height: 0; padding-bottom: 0; }
.entete-page--haut-parcours .parcours--haut { margin-top: var(--e-6); }
.entete-prix { display: grid; row-gap: var(--e-8); column-gap: var(--e-3); }
/* Les deux prix du haut de Tarifs, en grand et sans boite, comme sur l'accueil. */
.entete-prix__bloc { display: grid; gap: var(--e-1); padding: 0; max-width: none; }
.entete-prix__montant { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-affiche); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.entete-prix__note { grid-column: 1 / -1; margin-top: var(--e-4); max-width: 72ch; font-size: var(--t-petit); }
.entete-prix__periode { font-weight: 600; }
.entete-page--haut-prix .entete-page__arche { width: min(80%, 320px); justify-self: center; }
@media (min-width: 840px) {
  /* Le titre a gauche, sa phrase et son bouton a droite : le sujet de la page monte dans le premier ecran. */
  .entete-page--haut-texte .entete-page__texte, .entete-page--haut-parcours .entete-page__texte { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: var(--e-6); }
  .entete-page--haut-texte .entete-page__texte > *, .entete-page--haut-parcours .entete-page__texte > * { grid-column: 8 / -1; }
  .entete-page--haut-texte .entete-page__texte > h1, .entete-page--haut-parcours .entete-page__texte > h1 { grid-column: 1 / span 7; grid-row: 1 / span 3; max-width: none; }
  .entete-page--haut-texte .hero-intro, .entete-page--haut-parcours .hero-intro { margin-top: 0; font-size: clamp(18px, 1.5vw, 22px); }
  .entete-page--haut-texte .action-row, .entete-page--haut-parcours .action-row { margin-top: 0; }
  .entete-page--haut-parcours { align-items: start; }
  .entete-page--haut-parcours .parcours--haut { grid-column: 1 / -1; margin-top: 0; }
  .entete-page--haut-prix { align-items: end; }
  .entete-page--haut-prix .entete-page__texte { grid-column: 1 / span 7; grid-row: 1; }
  .entete-page--haut-prix .entete-page__arche { grid-column: 9 / -1; grid-row: 1; width: min(100%, 360px); }
  .entete-prix { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
  .entete-prix__bloc { grid-template-columns: auto 1fr; column-gap: var(--e-6); align-items: end; padding: 0; }
  .entete-prix__montant { grid-row: 1 / span 2; }
}

/* --- Duo : deux sections cote a cote, chacune avec son detail au-dessus de son texte --- */
.duo { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; display: grid; gap: var(--e-12); }
.duo__carte .section__figure { width: min(100%, 360px); margin: 0 0 var(--e-16); }
.duo__carte h2 { font-size: max(26px, var(--t-moyen)); margin-bottom: var(--e-6); max-width: 18ch; }
.duo__carte p + p { margin-top: var(--e-4); }
.duo__carte .points, .duo__carte .section-links { margin-top: var(--e-6); }
@media (min-width: 600px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-8); align-items: start; } }
@media (min-width: 840px) { .duo { column-gap: var(--e-12); } }
/* Une arche a cote d'un cercle : meme boite pour les deux images, posees en bas, pour que les titres partagent une ligne. */
@media (min-width: 600px) { .duo:has(.scene--arche) .duo__carte .section__figure { aspect-ratio: 20 / 27; display: flex; flex-direction: column; justify-content: flex-end; } .duo:has(.scene--arche) .duo__carte .section__figure > .scene { width: 100%; } }
/* Au telephone, un detail reste un detail : il ne prend pas tout l'ecran. */
@media (max-width: 599px) { .section__figure:has(.scene--arche) { width: min(100%, 260px); } .section__figure:has(.scene--cercle) { width: min(100%, 300px); } }

/* --- Fiches du 18/10 : un choix Enfants / Adultes, une fiche a la fois (a toutes les largeurs depuis la recette 22) */
.fiches__choix { display: none; }
@media screen {
  .fiches__choix { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: var(--e-6); padding: 4px; border-radius: var(--r-full); background: var(--sous); }
  .fiches__choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .fiches__choix label { display: grid; place-items: center; min-height: 44px; padding-inline: var(--e-6); border-radius: var(--r-full); font-weight: 600; cursor: pointer; }
  .fiches__choix input:checked + label { background: #FFFFFF; color: #25113F; }
  .fiches__choix input:focus-visible + label { outline: 2px solid #FFFFFF; outline-offset: 2px; }
  .fiches-bloc:has(#fiche-enfants:checked) .fiche:nth-child(2), .fiches-bloc:has(#fiche-adultes:checked) .fiche:nth-child(1) { display: none; }
  .fiches-bloc .fiches { margin-top: var(--e-4); }
}

/* --- Tableaux au telephone : une rangee par ligne, l'intitule au-dessus du detail --------- */
.price-table thead th { white-space: nowrap; }
@media (max-width: 599px) {
  .price-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .price-table tbody th { grid-column: 1; font-weight: 700; }
  .price-table tbody td { grid-column: 2; }
  .price-table tbody td:only-of-type { text-align: end; }
  .price-table thead { display: none; }
}

/* --- Telephone : le titre de la page mene, la section suit ; le pied de page en deux colonnes --- */
@media (max-width: 599px) {
  /* Le titre de la page fait 1,6 a 1,8 fois un titre de section, et tient en deux lignes des 360 px. */
  :root { --t-titre: 28px; }
  /* Tarifs : les deux prix d'abord, la question de la page ; le cercle ensuite. */
  .entete-page--haut-prix .entete-prix { order: 2; }
  .entete-page--haut-prix .entete-page__arche { order: 3; }
  .chapitre h2 { font-size: var(--t-titre); }
  .duo__carte h2 { font-size: var(--t-titre); }
  .entete-page:not(.entete-page--document) h1 { font-size: clamp(36px, 11.6vw, 48px); }
  .entete-page:not(.entete-page--document) .entete-page__texte--long h1 { font-size: clamp(32px, 10.6vw, 44px); }
  .entete-page:not(.entete-page--document) .entete-page__texte--tres-long h1 { font-size: clamp(28px, 8.6vw, 34px); }
}

/* --- Academie : la boucle file hors du bord droit, au lieu d'y etre coupee net ---------- */
@media (min-width: 840px) {
  .entete-page--libre:has(.scene:not([data-anime])) .entete-page__arche { margin-inline-end: calc(-1 * max(var(--marge), (100vw - var(--contenu)) / 2) - 24px); width: calc(100% + max(var(--marge), (100vw - var(--contenu)) / 2) + 24px); }
  /* La legende reste dans la marge de la page, pas dans le debord. */
}

/* --- Phrase seule : centree, elle ne laisse pas une moitie d'ecran vide -------------------- */
.bande-phrase { text-align: center; }
.bande-phrase__phrase, .bande-phrase .bande-image__sous { margin-inline: auto; }

/* --- Fonds : une section par page sur un autre champ --------------------------------
   Le violet porte la page ; une section passe sur la lavande de la salle (encre prune), une autre sur le prune
   profond du panneau. Les teintes sont celles de l'ambiance violette (#EEE6FA, #25113F, #4E2983, #BA98FB). */
.fond { margin-top: var(--respire); padding-bottom: var(--respire); }
.fond > .section, .fond > .section--pleine, .fond > .section--parcours, .fond > .groupe { padding-top: var(--respire); }
.site-main > .fond:last-child { margin-bottom: 0; }
/* Deux champs qui se suivent se touchent : pas de filet de violet entre eux. */
.fond + .fond { margin-top: 0; }
[data-ambiance="violet"] .fond--lavande {
  background: #EEE6FA; color: #25113F;
  --encre: #25113F; --encre-douce: #4E2983; --encre-accent: #4E2983; --contour: #4E2983; --filet: #BA98FB;
  --action: #4E2983; --sur-action: #FFFFFF; --action-survol: #25113F; --sur-action-survol: #FFFFFF;
  --sous: #E8D8FF; --champ: #E8D8FF; --champ-fort: #BA98FB; --marque: #4E2983; --sur-marque: #FFFFFF; --avant: #FFFFFF;
}
[data-ambiance="violet"] .fond--prune {
  background: #25113F; color: #FFFFFF;
  --sous: #4E2983; --champ: #4E2983; --champ-fort: #8652E6;
}
[data-ambiance="violet"] .fond--lavande .scene--cercle .scene__cadre, [data-ambiance="violet"] .fond--lavande .scene--arche .scene__cadre { background: #FFFFFF; }
[data-ambiance="violet"] .fond--lavande .section__figure::after, [data-ambiance="violet"] .fond--lavande .pleine__image::after { opacity: .5; }
[data-ambiance="violet"] .fond--prune .fiche { background: #4E2983; }
[data-ambiance="violet"] .fond--prune .fiche:nth-child(2) { background: #FFFFFF; color: #25113F; }
.fond--lavande .lien-fleche { color: inherit; }
/* Phrase seule sur un champ : un ecran d'un seul element, en grand. */
.bande-phrase { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.bande-phrase__phrase { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-titre); line-height: 1.06; letter-spacing: -0.03em; max-width: 26ch; text-wrap: balance; }
.bande-phrase__phrase + .bande-image__sous { margin-top: var(--e-6); font-size: var(--t-corps); line-height: 1.5; max-width: 52ch; }
/* Schema « la classe se forme » (dessins en code, direction.json « dessins ») : sur la nuit, comme sur la planche du 21/10. */
.bande-phrase--schema { text-align: start; }
.bande-phrase--schema .bande-phrase__phrase, .bande-phrase--schema .bande-image__sous { margin-inline: 0; }
.schema-classe { display: grid; gap: var(--e-6); margin-top: var(--e-10); border-radius: var(--r-lg); padding: var(--e-6); background: #25113F; color: #FFFFFF; }
.schema-classe__figure { margin: 0; }
.schema-classe__figure svg { display: block; width: 100%; height: auto; font-family: var(--police-corps); }
.schema-classe__figure figcaption { margin-top: var(--e-2); font-size: var(--t-petit); color: #DCCAFD; }
.schema-classe__anneau { transition: opacity .22s; }
.schema-classe__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.schema-classe__etapes li { border-radius: var(--r-md, 16px); padding: var(--e-3) var(--e-4); background: rgb(255 255 255 / .06); color: #DCCAFD; transition: background-color .22s, color .22s; }
.schema-classe__etapes li.est-active { background: #8652E6; color: #FFFFFF; }
.schema-classe__etapes strong { display: block; font-family: var(--police-titre); font-weight: 600; color: #FFFFFF; }
.schema-classe__etat { margin-top: var(--e-4); font-weight: 600; min-height: 1.5em; }
.schema-classe__choix { display: none; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.js .schema-classe__choix { display: flex; }
.schema-classe__choix button { min-height: 44px; padding-inline: var(--e-5); border: 2px solid #FFFFFF; border-radius: 999px; background: transparent; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.schema-classe__choix button[aria-pressed="true"] { background: #FFFFFF; color: #25113F; }
.schema-classe__choix button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (min-width: 840px) { .schema-classe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--e-10); padding: var(--e-8); } }
@media (prefers-reduced-motion: reduce) { .schema-classe__etapes li, .schema-classe__anneau { transition: none; } }

/* --- Impression : tout le contenu, immobile ------------------------------------- */
@media print {
  [data-revele], [data-revele-enfants] > *, .ligne__in, .entete-page__arche, .porte__texte, .porte__scene, .entete-page__image { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .pause-anim, .scene__onde, .halo, .mobile-menu, .skip-link, .porte__arche, .porte__phrase, .porte__cercle { display: none !important; }
  .scene__cadre { -webkit-mask: none !important; mask: none !important; }
  .scene .scene__calque { transform: none !important; visibility: visible !important; }
  .site-header, .site-footer, .porte__collant, .lecture__sommaire, .section__titre { position: static !important; }
  .porte { height: auto !important; }
  .appel__lien { min-height: 0; border-radius: 0; }
  a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --- Familles : un gros plan dans une grande arche, qui deborde du bord droit ---------------- */
.entete-page--haut-gros-plan { padding-bottom: 0; }
.entete-page__panneau { margin-inline: calc(var(--marge) * -1); }
.entete-page__panneau .scene__cadre { display: block; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 50% 50% 0 0 / 28% 28% 0 0; background: #EEE6FA; }
.entete-page__panneau img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
@media (min-width: 840px) {
  .entete-page--haut-gros-plan { min-height: min(100svh, 940px); align-items: stretch; }
  .entete-page--haut-gros-plan .entete-page__texte { grid-column: 1 / span 6; align-self: center; padding-bottom: var(--e-12); }
  .entete-page--haut-gros-plan .entete-page__panneau { grid-column: 7 / -1; grid-row: 1; display: flex; margin-inline: 0 calc(-1 * max(var(--marge), (100vw - var(--contenu)) / 2)); }
  .entete-page__panneau .entete-page__image { flex: 1; display: flex; flex-direction: column; transform: none; }
  .entete-page__panneau .scene__cadre { flex: 1; aspect-ratio: auto; min-height: 0; border-radius: min(26vw, 380px) 0 0 0 / min(22vw, 320px) 0 0 0; }
}

/* --- Tablette : le titre de la page sur deux lignes, en grand, au lieu d'une ligne de telephone --- */
@media (min-width: 600px) and (max-width: 839px) {
  .entete-page:not(.entete-page--document) h1, .entete-page:not(.entete-page--document) .entete-page__texte--long h1 { font-size: clamp(52px, 7.6vw, 64px); }
  .entete-page:not(.entete-page--document) .entete-page__texte--tres-long h1 { font-size: clamp(48px, 7vw, 56px); }
  .porte__texte h1 { font-size: clamp(52px, 7.4vw, 62px); }
  :root { --t-corps: 18px; }
  /* Tarifs : le cercle a gauche, les deux prix a droite, au lieu d'un cercle seul au bord. */
  .entete-page--haut-prix { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-6); align-items: center; }
  .entete-page--haut-prix .entete-page__texte { grid-column: 1 / -1; }
  .entete-page--haut-prix .entete-page__arche { grid-column: 1; width: 100%; justify-self: start; }
  .entete-page--haut-prix .entete-prix { grid-column: 2; }
  /* Cartes de prix cote a cote, plus compactes qu'au bureau. */
  /* La bande d'appel ne garde pas un ecran de vide entre la phrase et le grand mot. */
  .appel__lien { min-height: 0; }
  /* Titres de section a 38 px ; images plafonnees ; pied de page en trois colonnes. */
  :root { --t-titre: 38px; }
  .chapitre h2 { font-size: 38px; }

  .pleine__image .scene { width: min(100%, 440px); }
  .bande-image--cercle .scene { width: min(86vw, 480px); }
  .section--large .section__figure { width: min(100%, 420px); margin-inline: auto; }
  /* Chapitres de l'accueil : l'image a gauche, le texte a droite, comme une page de livre ouverte. */
  .chapitre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-8); align-items: center; padding-block: var(--e-12); }
  .chapitre__image-mobile { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
  .chapitre > :not(.chapitre__image-mobile) { grid-column: 2; }
  .chapitre__image-mobile .scene { width: 100%; }
  /* Les trois etapes de l'accueil cote a cote, comme au bureau, en tuiles plus basses. */
  .pousse__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--e-4); row-gap: 0; }
  .pousse__etape { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
  .pousse__etape .pousse__tuile { align-self: end; }
  .pousse__etape--0 .pousse__tuile { height: 30vw; }
  .pousse__etape--1 .pousse__tuile { height: 38vw; }
  .pousse__etape--2 .pousse__tuile { height: 46vw; }
  .pousse__etape--0 .pousse__image { width: min(100%, 21vw); }
  .pousse__etape--1 .pousse__image, .pousse__etape--2 .pousse__image { width: min(100%, 26vw); }
  .pousse__etape h3 { font-size: var(--t-moyen); }
}

/* --- Cours : dans chaque arche du parcours, ce que l'eleve lit a cette etape --------------------- */
.parcours__arabe { font-family: var(--police-arabe-ornement); font-weight: 700; line-height: 1.6; letter-spacing: 0; word-spacing: .15em; white-space: nowrap; }
@media (max-width: 839px) {
  .parcours--haut .parcours__etape { align-items: center; gap: var(--e-4); padding-block: var(--e-5); }
  /* Marge physique : le libelle arabe est en rtl, sa marge « de debut » serait a droite. */
  .parcours--haut .parcours__arabe { order: 2; margin-left: auto; font-size: 28px; line-height: 1.3; }
}
@media (min-width: 840px) {
  .parcours--haut .parcours__etape { flex-direction: column; align-items: stretch; }
  /* Marches de 50 px : l'arabe se pose juste au-dessus du libelle, sans champ vide entre les deux. */
  .parcours--haut .parcours__etape:nth-child(1) { min-height: 220px; }
  .parcours--haut .parcours__etape:nth-child(2) { min-height: 270px; }
  .parcours--haut .parcours__etape:nth-child(3) { min-height: 320px; }
  .parcours--haut .parcours__etape:nth-child(4) { min-height: 370px; }
  .parcours--haut .parcours__arabe { margin-block: auto var(--e-6); text-align: center; font-size: clamp(38px, 3.6vw, 60px); }
}
.parcours__precision { display: block; margin-top: var(--e-1); font-size: 15px; font-weight: 500; }

/* --- Academie : les fondateurs, leurs noms en grand a la place d'une image ------------------------- */
.section__figure--noms { width: 100%; background: none; padding: 0; border-radius: 0; }
.noms { list-style: none; display: grid; gap: var(--e-8); padding: 0; margin: 0; max-width: none; }
.noms__nom { display: block; font-family: var(--police-titre); font-weight: 600; font-size: var(--t-moyen); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.noms__role { display: block; margin-top: var(--e-2); font-family: var(--police-corps); font-size: var(--t-petit); font-weight: 600; letter-spacing: 0; opacity: .8; }

/* --- Bande : une phrase en grand et un detail cadre, sur son fond ------------------------------- */
.fond > .bande-image--detail { margin-top: 0; padding-top: var(--respire); display: grid; gap: var(--e-8); justify-items: center; text-align: center; max-width: calc(var(--contenu) + 2 * var(--marge)); }
.bande-image--detail .scene { width: min(72vw, 420px); }
.bande-image--detail .bande-phrase__phrase { margin-inline: auto; }
.bande-image--detail .bande-image__sous { margin-inline: auto; }
@media (min-width: 840px) {
  .fond > .bande-image--detail { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: center; justify-items: stretch; text-align: start; }
  .bande-image--detail .bande-image__texte { grid-column: 1 / span 7; grid-row: 1; margin-top: 0; }
  .bande-image--detail .bande-phrase__phrase, .bande-image--detail .bande-image__sous { margin-inline: 0; }
  .bande-image--detail .scene { grid-column: 8 / -1; grid-row: 1; width: 100%; max-width: min(540px, var(--natif, 540px)); justify-self: end; }
  /* La phrase de la bande porte l'idee de la page : elle passe en taille d'affiche. */
  .bande-image--detail .bande-phrase__phrase { font-size: var(--t-titre); max-width: 15ch; }
}
.section__titre-plein h2 { max-width: 24ch; margin-bottom: var(--e-6); }
@media (min-width: 600px) {
  /* Le titre de la section mene, sur toute la largeur ; les noms dessous a gauche, le texte a droite. */
  .section--figure:has(.section__figure--noms) .section__grille { align-items: start; }
  .section__titre-plein { grid-column: 1 / -1; grid-row: 1; }
  .section--figure:has(.section__figure--noms) .section__texte { grid-row: 2; }
  .section--figure:has(.section__figure--noms) .section__figure--noms { grid-row: 2; align-self: start; margin-top: var(--e-1); }
}

/* Tablette : regles placees apres celles du telephone, qu'elles remplacent entre 600 et 839 px. */
@media (min-width: 600px) and (max-width: 839px) {
  /* Cours : les quatre arches restent des arches, deux par rangee, pour que chaque libelle ait la place d'une ligne ou deux. */
  .parcours--haut { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--e-4); }
  .parcours--haut .parcours__etape { flex-direction: column; align-items: stretch; border-radius: var(--arche); padding: 0 var(--e-5) var(--e-5); }
  .parcours--haut .parcours__etape:nth-child(1) { min-height: 190px; }
  .parcours--haut .parcours__etape:nth-child(2) { min-height: 230px; }
  .parcours--haut .parcours__etape:nth-child(3) { min-height: 250px; }
  .parcours--haut .parcours__etape:nth-child(4) { min-height: 290px; }
  .parcours--haut .parcours__arabe { order: 0; margin: auto 0 var(--e-4); text-align: center; font-size: 36px; line-height: 1.5; }
  .parcours--haut .parcours__etape > span:not(.parcours__arabe) { font-size: 18px; }
}

/* --- Recette 15 : un cadre par role, des blocs sans carte --------------------------------------
   L'arche pour les personnes, le cercle pour la seule halqa ; les illustrations entieres flottent. */
@media (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  /* La phrase du zoom, a la taille du titre de l'accueil, au-dessus de la classe vue d'en haut : une image, une phrase. */
  .js .porte__cercle { grid-template-rows: auto minmax(0, 1fr); align-content: start; row-gap: 2svh; padding: calc(var(--entete) + 3svh) var(--marge) 4svh; }
  .js .porte__phrase { position: relative; inset: auto; top: auto; translate: none; grid-row: 1; text-align: center; font-size: var(--t-accueil); line-height: 1.02; }
  .js .porte__halqa { grid-row: 2; align-self: start; width: min(48vw, calc(100svh - var(--entete) - 2.1 * var(--t-accueil) - 4svh)); margin-inline: auto; }
}
@media (min-width: 840px) {
  /* Une seule arche pour les trois chapitres, de la meme taille : 540 px au plus, jamais plus haute que la fenetre. */
  .chapitres { --arche-chapitre: min(100%, 540px, calc((100svh - var(--entete) - 8svh) * .92 * .8)); }
  .chapitres__image.scene--arche > .scene__cadre { width: min(var(--natif, 100%), var(--arche-chapitre)); }
  /* Les mains entrent dans la meme arche, sur le sol lavande de leur rendu ; elles montent toujours vers le Coran. */
  [data-ambiance="violet"] .chapitres__image[data-anime="mains"] { inset: 4%; display: flex; width: auto; translate: none; }
  .chapitres__image[data-anime="mains"] > .scene__cadre { flex: none; align-self: center; width: var(--arche-chapitre); aspect-ratio: 4 / 5; border-radius: 50% 50% 0 0 / 40% 40% 0 0; overflow: hidden; background: #EEE6FA; }
  .chapitres__image[data-anime="mains"] > .scene__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; scale: 1.35; transform-origin: 46% 57%; -webkit-mask: none; mask: none; }
}

/* Les tuiles de l'accueil : une arche dans l'arche, qui grandit avec la tuile ; jamais plus grande que son fichier. */
.pousse__image { max-width: var(--natif, none); }
@media (min-width: 840px) {
  .pousse__etape--0 .pousse__image { width: min(100%, 28svh); }
  .pousse__etape--1 .pousse__image { width: min(100%, 34svh); }
  .pousse__etape--2 .pousse__image { width: min(100%, 40svh); }
}

/* Les encarts du 18/10, mot pour mot : deux colonnes egales sur le meme fond, sans carte ; au bureau, les lignes de
   meme rang se font face (age, prix, seances, langue, suivi, remboursement, resiliation). */
.fiche, .fiche:nth-child(2),
[data-ambiance="violet"] .fiche, [data-ambiance="violet"] .fiche:nth-child(2),
[data-ambiance="violet"] .fond--prune .fiche, [data-ambiance="violet"] .fond--prune .fiche:nth-child(2) { padding: 0; border-radius: 0; background: none; color: inherit; }
.fiche h3 { font-size: var(--t-moyen); }
.fiche__lignes { font-size: var(--t-corps); }
@media (min-width: 840px) {
  .fiches:has(.fiche + .fiche) { column-gap: var(--e-16); }
  /* Sept phrases par encart (decision du 18/10) : une rangee par phrase. Au-dela, chaque colonne garde son propre rythme. */
  .fiches:has(.fiche + .fiche):not(:has(.fiche__lignes li:nth-child(8))):not(.fiches-bloc > .fiches) { grid-template-rows: auto repeat(7, auto); row-gap: var(--e-4); }
  .fiches:has(.fiche + .fiche):not(:has(.fiche__lignes li:nth-child(8))):not(.fiches-bloc > .fiches) .fiche { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
  .fiches:has(.fiche + .fiche):not(:has(.fiche__lignes li:nth-child(8))):not(.fiches-bloc > .fiches) .fiche__lignes { grid-row: span 7; grid-template-rows: subgrid; }
  .fiches:has(.fiche + .fiche) .fiche__lignes li:first-child { min-height: 0; }
}

/* --- Tarifs : une seule image, les remises en grands chiffres, le tableau de la famille sans cases --- */
.remises { list-style: none; display: grid; gap: var(--e-10) var(--e-6); margin-top: var(--e-10); }
.remise { display: grid; gap: var(--e-2); align-content: start; }
/* A la taille des titres de section (28 px au telephone) : le chiffre mene, sa ligne se lit dessous comme un texte. */
.remise__valeur { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-titre); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.remise__objet { max-width: 32ch; }
@media (min-width: 600px) { .remises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 840px) {
  .remises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section--large:not(.section--figure):has(.remises) .section__titre { grid-column: 1 / span 6; position: static; }
  .section--large:not(.section--figure):has(.remises) .section__corps { grid-column: 1 / -1; max-width: none; }
  .section--large:not(.section--figure):has(.remises) .section__corps > p:first-child { max-width: 52ch; }
}
.price-table--famille, .price-table--famille thead th, .price-table--famille tbody tr:nth-child(odd) { background: none; }
.price-table--famille { border-radius: 0; overflow: visible; }
.price-table--famille th, .price-table--famille td { padding-inline: 0; vertical-align: baseline; }
.price-table--famille tbody th { font-weight: 600; }
.price-table--famille td { font-family: var(--police-titre); font-size: var(--t-moyen); font-weight: 600; text-align: end; }
.price-table--famille thead th:last-child { text-align: end; }
@media (min-width: 840px) {
  /* La scene entiere de la place qui attend, a droite des deux prix, sur toute la hauteur du haut de page. */
  .entete-page--haut-prix .entete-page__arche { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: center; justify-self: end; width: min(100%, 480px); }
  .entete-prix { grid-column: 1 / span 8; }
  /* Chaque prix en colonne : le chiffre, puis sa periode et son public sur des lignes entieres. */
  .entete-prix__bloc { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); align-content: start; align-items: start; }
  .entete-prix__montant { grid-row: auto; margin-bottom: var(--e-2); }
}

/* Deux arches cote a cote : la meme taille, la meme hauteur. */
@media (min-width: 600px) { .duo .duo__carte .section__figure:has(.scene--arche) { width: min(100%, 440px); } }

/* --- Academie : le mot du directeur et les fondateurs -------------------------------------------
   Une vraie photo, desaturee vers le noir et blanc dans les teintes de l'ambiance, calee au bord gauche de l'ecran :
   elle est coupee a gauche, et ce bord se confond avec celui de l'ecran. Le haut droit s'arrondit comme l'arche. */
.mot { display: grid; row-gap: var(--e-10); padding-top: var(--respire); }
.portrait { margin: 0; }
/* La demi-arche en proportions : la meme courbe au telephone et au bureau. */
.portrait__cadre { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 0 72% 0 0 / 0 48% 0 0; background: #EEE6FA; }
.portrait__cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.mot__photo { width: min(88vw, 520px); align-self: end; }
/* La photo touche le bas de la section ; le texte garde sa marge dessous, comme dessus. */
.mot__texte { padding: 0 var(--marge) var(--e-16); }
.mot__texte h2 { max-width: 18ch; margin-bottom: var(--e-8); }
.mot__citation { margin: 0; font-family: var(--police-titre); font-weight: 500; font-size: var(--t-moyen); line-height: 1.4; letter-spacing: -0.01em; max-width: 34ch; }
.mot__citation p + p { margin-top: var(--e-4); }
.mot__signature { margin-top: var(--e-8); display: grid; gap: var(--e-1); }
.mot__nom { font-weight: 700; }
/* Le role se lit sous le nom, plus discret que lui. */
.mot__role, .profil__role { font-weight: 500; color: var(--encre-douce); }
@media (min-width: 840px) {
  /* Le texte part de la 7e colonne de la page (50vw + la moitie de la gouttiere), comme les autres paires. */
  .mot { grid-template-columns: minmax(0, calc(50vw + 12px - 120px)) minmax(0, 1fr); align-items: end; column-gap: 120px; padding-inline-end: max(var(--marge), calc((100vw - var(--contenu)) / 2)); }
  .mot__photo { width: 100%; }
  .mot__texte { padding: 0 0 var(--e-16); }
}
.fondateurs { padding: var(--respire) var(--marge) 0; max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.fondateurs__texte { margin-top: var(--e-6); max-width: 60ch; }
.fondateurs__texte > p + p { margin-top: var(--e-4); }
.profils { list-style: none; display: grid; gap: var(--e-12); margin-top: var(--e-12); }
.profil h3 { font-size: var(--t-moyen); line-height: 1.2; }
/* Le portrait d'un fondateur : la demi-arche des photos, 300 px au plus, au-dessus de son nom. */
.portrait--profil { width: min(100%, 300px); margin-bottom: var(--e-6); }
.profil__role { margin-top: var(--e-1); }
.profil__parcours { list-style: none; display: grid; gap: var(--e-3); margin-top: var(--e-6); max-width: 34ch; }
@media (min-width: 840px) {
  .fondateurs__tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
  .fondateurs__tete h2 { grid-column: 1 / span 6; }
  .fondateurs__texte { grid-column: 7 / -1; margin-top: 0; }
}
.groupe { row-gap: var(--e-12); }
/* Tarifs : le simulateur pose sur le violet, sans carte ; ses libelles a la taille du texte, le total en grand. */
.simulator--page { background: none; border-radius: 0; padding: 0 var(--marge); }
.simulator--page > p, .simulator--page .simulator__fields label, .simulator--page .simulator__champ { font-size: var(--t-corps); }
.simulator--page .simulator__eleves li { background: none; border-radius: 0; padding-inline: 0; }
@media (min-width: 840px) { .simulator--page { padding: 0; } }

/* Accueil, au bureau : le titre, l'enonce et la phrase du zoom partagent une seule taille d'affiche, celle qui laisse
   tenir l'enonce sur sa mesure (16,4 em). */
@media (min-width: 840px) {
  :root { --t-accueil: min(clamp(44px, 5.4vw, 88px), calc((min(100vw, var(--contenu) + 2 * var(--marge)) - 2 * var(--marge)) / 16.4)); }
  .porte__texte h1 { font-size: var(--t-accueil); }
}
/* Telephone : les titres de section passent a 28 px ; une phrase seule sur une bande reste a 24 px pour tenir en deux lignes. */
@media (max-width: 599px) { .bande-phrase__phrase { font-size: 24px; } }

/* Tarifs : le focus du clavier se voit dans les champs du simulateur pose sur le violet. */
.simulator--page .simulator__fields input:not([type="checkbox"]):focus-visible, .simulator--page .simulator__fields select:focus-visible { outline: 3px solid var(--encre-accent); outline-offset: 2px; }
/* Accueil : la phrase du directeur, signee, a cote de sa photo. */
.panneau__citation { margin: 0; font-family: var(--police-titre); font-weight: 500; font-size: var(--t-moyen); line-height: 1.35; max-width: 30ch; }
.panneau__citation blockquote { margin: 0; }
.panneau__signature { display: grid; gap: var(--e-1); margin-top: var(--e-4); font-family: var(--police-corps); font-size: var(--t-corps); }
/* Accueil, sous 840 px : l'enonce centre, une phrase par ligne, a la plus grande taille qui la fait tenir (16,4 em). */
@media (max-width: 839px) {
  .enonce__texte { text-align: center; font-size: min(48px, calc((100vw - 2 * var(--marge)) / 16.4)); }
  /* Les mains dans leur arche, comme au bureau, au lieu de deborder par le bord de l'ecran. */
  .chapitre__image-mobile:has(.scene[data-anime="mains"]) { margin-inline-start: 0; }
  .chapitre__image-mobile .scene[data-anime="mains"] { background: none; }
  .chapitre__image-mobile .scene[data-anime="mains"] > .scene__cadre { width: min(100%, 380px); aspect-ratio: 4 / 5; border-radius: 50% 50% 0 0 / 40% 40% 0 0; overflow: hidden; background: #EEE6FA; }
  .chapitre__image-mobile .scene[data-anime="mains"] > .scene__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; scale: 1.35; transform-origin: 46% 57%; -webkit-mask: none; mask: none; }
}
/* Tarifs : la scene de la place qui attend, plus grande, sur la hauteur du haut de page. */
@media (min-width: 840px) {
  .entete-page--haut-prix .entete-page__arche { grid-column: 8 / -1; width: min(100%, 560px); }
  .entete-prix { grid-column: 1 / span 7; }
}

/* --- Recette 18 ------------------------------------------------------------------------------------------- */
/* Une echelle courte : l'affiche de l'accueil (titre, enonce, prix, fin), l'affiche des pages (titres d'ouverture et
   de fin, prix de Tarifs), titre de section, intertitre, texte, notes. */
:root { --t-entete: clamp(52px, 4.6vw, 66px); }
.champ__montant { font-size: clamp(44px, 10.4vw, 64px); }
@media (min-width: 840px) { .champ__montant { font-size: var(--t-accueil); } }
@media (min-width: 840px) {
  .entete-page:not(.entete-page--document) h1, .entete-page--libre .entete-page__texte > h1 { font-size: var(--t-entete); }
  .entete-page .hero-intro, .entete-page--libre .hero-intro, .entete-page--haut-texte .hero-intro, .entete-page--haut-parcours .hero-intro { font-size: var(--t-corps); font-weight: 500; }
  /* La phrase d'ouverture remplit sa colonne de droite jusqu'a la marge, comme le reste de la page. */
  .entete-page--haut-texte .hero-intro, .entete-page--haut-parcours .hero-intro { max-width: none; }
  .entete-prix__montant, .simulator--page .simulator__prix { font-size: var(--t-entete); }
}
.parcours__precision { font-size: var(--t-petit); }
@media (min-width: 840px) {
  /* Cours : les lettres des arches a la taille des titres de section, leurs libelles a celle du texte. */
  .parcours--haut .parcours__arabe { font-size: var(--t-titre); }
  .parcours__etape { font-size: var(--t-corps); }
}

/* Le visage du directeur sur l'accueil : cadre en largeur, la meme courbe d'arche en haut a droite. */
.portrait--visage .portrait__cadre { aspect-ratio: 5 / 4; border-radius: 0 56% 0 0 / 0 70% 0 0; }

/* Fin des pages principales : la page se referme sur un titre de la taille de son ouverture, pose sur le fond, et ce
   titre est le lien. Au telephone, sa taille le fait tenir en deux lignes (8,8 em pour la plus longue ligne). */
.appel--seuil { padding: var(--respire) var(--marge) calc(var(--respire) + var(--e-8)); max-width: calc(var(--contenu) + 2 * var(--marge)); margin-inline: auto; }
.appel__titre { font-size: min(44px, calc((100vw - 2 * var(--marge)) / 8.8)); line-height: 1.02; letter-spacing: -0.02em; max-width: none; }
.appel__titre-lien { color: inherit; text-decoration: none; }
.appel__titre-lien:hover, .appel__titre-lien:focus-visible { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .14em; }
.appel__titre-lien svg { display: inline-block; width: .56em; height: .56em; margin-inline-start: .16em; vertical-align: -.02em; transition: transform var(--mv-micro) var(--mv-entree); }
.appel__titre-lien svg path { stroke-width: 2.6; }
.appel__titre-lien:hover svg, .appel__titre-lien:focus-visible svg { transform: translateX(.08em); }
.appel--seuil .appel__phrase { margin-top: var(--e-6); max-width: 46ch; padding-inline: 0; }
@media (min-width: 600px) and (max-width: 839px) { .appel__titre { font-size: clamp(52px, 7.6vw, 64px); } }
@media (min-width: 840px) {
  /* Le titre sur sept colonnes (deux lignes), sa phrase sur les cinq autres, alignee sur le bas du titre. */
  .appel--seuil { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: end; }
  .appel__titre { grid-column: 1 / span 7; font-size: var(--t-entete); }
  .appel--seuil .appel__phrase { grid-column: 8 / -1; margin-top: 0; padding-bottom: .5em; max-width: none; }
}

/* La grande bande blanche de l'accueil ne garde pas de vide entre sa phrase et son grand mot sous 840 px. */
@media (max-width: 839px) { .appel__lien { min-height: 0; } }

/* Accueil, telephone : la premiere phrase de l'enonce en grand sur deux lignes, la seconde dessous, plus petite. */
@media (max-width: 599px) {
  .enonce { padding-bottom: var(--e-16); }
  .enonce__texte span { white-space: normal; }
  /* La premiere phrase a la taille de la phrase du zoom et de la fin (10,5 em de mesure), la seconde a celle des intertitres. */
  .enonce__texte span:first-child { font-size: min(44px, calc((100vw - 2 * var(--marge)) / 10.5)); text-wrap: balance; }
  .enonce__texte span + span { margin-top: var(--e-4); font-size: var(--t-moyen); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
}

/* Tarifs, premier ecran : le titre, sa phrase, une action et un lien a gauche ; la scene grande a droite ; les deux
   prix sous le texte, a la hauteur du bas de la scene ; leurs mentions sur toute la largeur. */
@media (min-width: 840px) {
  .entete-page--haut-prix { align-items: start; row-gap: var(--e-10); }
  .entete-page--haut-prix .entete-page__texte { grid-column: 1 / span 6; grid-row: 1; }
  .entete-page--haut-prix .entete-page__arche { grid-column: 7 / -1; grid-row: 1 / span 2; width: min(100%, 600px); justify-self: end; align-self: start; }
  .entete-prix { grid-column: 1 / span 6; grid-row: 2; align-self: end; }
  .entete-prix__note { grid-column: 1 / -1; }
}

/* --- Recette 19 ------------------------------------------------------------------------------------------- */
/* Accueil : la bande sombre, le titre avant la photo dans le document, la photo a gauche par la grille. */
@media (min-width: 840px) {
  .panneau__photo { grid-column: 1; grid-row: 1; }
  .panneau__in { grid-column: 2; grid-row: 1; }
}
/* Accueil : la fin a la taille de l'affiche de la page, comme son titre et son enonce. */
@media (min-width: 840px) { .page-accueil .appel__titre { grid-column: 1 / span 9; font-size: var(--t-accueil); } .page-accueil .appel--seuil .appel__phrase { grid-column: 10 / -1; } }
/* Au telephone, la fin de l'accueil a la taille de la phrase du zoom et de l'enonce : sa ligne la plus longue,
   « ou pour vous-meme. » et sa fleche, mesure 10,5 em. */
@media (max-width: 599px) { .page-accueil .appel__titre { font-size: min(44px, calc((100vw - 2 * var(--marge)) / 10.5)); } }

/* Academie, haut de page : le titre, sa phrase et son bouton dans une seule colonne a gauche ; la boucle dessous. */
@media (min-width: 840px) {
  .entete-page--libre .entete-page__texte { align-items: start; }
  .entete-page--libre .entete-page__texte > *, .entete-page--libre .entete-page__texte > h1 { grid-column: 1 / span 7; grid-row: auto; }
  .entete-page--libre .hero-intro { max-width: 46ch; }
}

/* Academie : le parcours du directeur sous sa signature ; les deux autres fondateurs cote a cote. */
.mot__parcours { margin-top: var(--e-6); }
@media (min-width: 600px) { .profils { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-8); } }
@media (min-width: 840px) {
  /* Chaque profil : le portrait a gauche, le nom, le role et le parcours a droite. */
  .profil { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--e-6); align-content: start; }
  .profil > .portrait--profil { grid-row: 1 / span 3; margin-bottom: 0; }
  .profil > :not(.portrait) { grid-column: 2; }
  .profil__parcours { align-content: start; }
}

/* Simulateur de l'accueil (feuille) : des champs assez larges pour leurs chiffres. */
@media (min-width: 600px) { .simulator:not(.simulator--page) .simulator__fields { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* --- Transitions entre les pages -------------------------------------------------------------------------------
   D'une page a l'autre du site, le contenu de la page quitte l'ecran en s'effacant vers le haut, et le suivant monte
   en place ; l'en-tete et le logo ne bougent pas (le logo ne s'anime jamais). Sans mouvement reduit seulement ; les
   navigateurs qui ne connaissent pas ces transitions changent de page comme avant. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-main { view-transition-name: contenu; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(contenu) { animation: none; }
  ::view-transition-old(contenu) { animation: page-sortie 200ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(contenu) { animation: page-entree 520ms cubic-bezier(.16, 1, .3, 1) 60ms both; }
}
@keyframes page-sortie { to { opacity: 0; transform: translateY(-16px); } }
@keyframes page-entree { from { opacity: 0; transform: translateY(32px); } }

/* --- Recette 20 : un seul bord pour les colonnes de droite (la 7e colonne de la grille), des sections variees ---- */
/* Des 1100 px, les titres d'affiche tiennent en deux lignes sur six colonnes : leur texte part alors de la 7e. */
@media (min-width: 1100px) {
  /* Fins de page : le titre sur six colonnes, sa phrase a partir de la 7e, comme le texte des sections. */
  .appel__titre { grid-column: 1 / span 6; }
  .appel--seuil .appel__phrase { grid-column: 7 / -1; }
  /* Hauts de page en texte (Cours, Comment ca marche) : le titre sur six colonnes, la phrase et le bouton a la 7e. */
  .entete-page--haut-texte .entete-page__texte > *, .entete-page--haut-parcours .entete-page__texte > * { grid-column: 7 / -1; }
  .entete-page--haut-texte .entete-page__texte > h1, .entete-page--haut-parcours .entete-page__texte > h1 { grid-column: 1 / span 6; }
}
@media (min-width: 840px) {
  /* Sections larges (Tarifs) : le texte et le tableau a la 7e colonne aussi. */
  .section--large .section__titre { grid-column: 1 / span 6; }
  .section--large .section__corps { grid-column: 7 / -1; }
  /* Duo : deux cartes de six colonnes, la seconde a la 7e colonne, la ou commence le texte des autres sections. */
  .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .duo > :first-child { grid-column: 1 / span 6; padding-inline-end: var(--e-6); }
  .duo > :last-child { grid-column: 7 / -1; }
  /* Academie : la societe et le contact cote a cote, au lieu de deux rangees titre et texte. */
  .groupe--pile .carte { grid-column: span 6; display: block; }
  .groupe--pile .carte > h2 { margin-bottom: var(--e-6); }
}
/* Familles : l'aide, juste avant la fin, en apartee : un intertitre et sa phrase, sans la coupe des grandes sections. */
.page-familles #aide .section__grille { display: block; }
.page-familles #aide .section__titre { position: static; }
.page-familles #aide h2 { font-size: var(--t-moyen); line-height: 1.2; max-width: none; margin-bottom: var(--e-3); }
.page-familles #aide .section__corps { max-width: 60ch; }
/* Tarifs : les champs du simulateur prennent les formes du site (pilules et boutons ronds). */
.simulator--page .simulator__fields input:not([type="checkbox"]), .simulator--page .simulator__fields select { border-radius: var(--r-full); }
.simulator--page .pas button { border-radius: 50%; }

/* --- Recette 20 (suite) : moins de coupes titre-texte, un seul bord a droite ----------------------------------- */
@media (min-width: 840px) {
  /* Hauts de page en texte : la phrase commence a la hauteur du titre, pas en dessous. */
  .entete-page--haut-texte .entete-page__texte, .entete-page--haut-parcours .entete-page__texte { align-items: start; }
  /* Accueil : « Un horaire fixe » et les questions des familles, titre au-dessus de leur texte, et non a cote. */
  .pousse__entete { display: block; }
  .pousse__entete h2 { max-width: 20ch; }
  .pousse__entete .pousse__corps { margin-top: var(--e-6); max-width: 60ch; }
  .faq-ouverte__tete { display: block; }
  .faq-ouverte__tete h2 { max-width: 20ch; }
  .faq-ouverte__intro { margin-top: var(--e-6); max-width: none; }
  .faq-ouverte__intro .liste-liens { display: flex; flex-wrap: wrap; gap: 0 var(--e-8); }
  /* Les deux prix de l'accueil et les deux fiches des cours : la seconde colonne a la 7e colonne de la grille. */
  .deux-champs__grille { column-gap: var(--e-6); }
  .deux-champs__grille > .champ:first-child { padding-inline-end: var(--e-10); }
  .fiches:has(.fiche + .fiche) { column-gap: var(--e-6); }
  .fiches .fiche { padding-inline: 0; }
  .fiches .fiche:first-child { padding-inline-end: var(--e-10); }
  /* Tarifs : « A savoir avant de commander » sur toute la largeur, son texte en deux colonnes sous le titre. */
  .page-tarifs #conditions .section__titre { grid-column: 1 / -1; position: static; margin-bottom: var(--e-8); }
  .page-tarifs #conditions .section__corps { grid-column: 1 / -1; max-width: none; columns: 2; column-gap: var(--e-6); }
  .page-tarifs #conditions .section__corps > * { break-inside: avoid; }
  /* Academie : la boucle remonte dans le premier ecran, sous et a cote du titre, et s'y arrete entiere. */
  .entete-page--libre .entete-page__texte { position: relative; z-index: 2; grid-row: 1; }
  .entete-page--libre .entete-page__arche { grid-row: 1 / span 2; align-self: end; }
  .entete-page--libre .entete-page__image img { max-height: calc(100svh - var(--entete) - var(--e-12)); }
}

/* Accueil, premier ecran : la porte un peu plus petite au bureau, pour que son arche ne touche pas l'en-tete ;
   au telephone, la porte et la famille en grand, cadrees sur la moitie droite de la scene. */
@media (min-width: 840px) { .porte__scene { width: 104vw; inset-inline-end: -9vw; } }
@media (max-width: 599px) { .porte__scene { width: 200vw; margin-inline-start: -100vw; } }

/* Accueil : la page se referme sous le haut d'une arche, comme elle s'ouvre sur une porte ; tout est centre. */
.appel--porte { display: block; text-align: center; }
.appel--porte .appel__arche { width: min(72%, 480px); margin: 0 auto var(--e-8); }
/* La legende dans le coin vide, en haut a droite de l'arche : le titre passe sous l'arche, pas sur la legende. */
.appel--porte .appel__titre { position: relative; max-width: 11em; margin-inline: auto; }
.appel--porte .appel__phrase { margin: var(--e-6) auto 0; max-width: 46ch; padding: 0; }
@media (min-width: 840px) { .page-accueil .appel--porte { display: block; } .page-accueil .appel--porte .appel__phrase { grid-column: auto; } }

/* --- Recette 21 : chaque page finit a sa facon ; les derniers ecarts de grille ------------------------------ */
/* Bandeau lavande centre (Familles, Comment ca marche, Tarifs) : le titre, sa phrase et un bouton, en encre sombre. */
.appel--centre { padding: var(--respire) var(--marge); text-align: center; background: #EEE6FA; color: #25113F; }
.appel--centre .appel__titre { font-size: min(44px, calc((100vw - 2 * var(--marge)) / 8.8)); line-height: 1.04; max-width: 14em; margin-inline: auto; color: inherit; }
.appel--centre .appel__phrase { margin: var(--e-6) auto 0; max-width: 46ch; color: inherit; }
.appel--centre .action-row { justify-content: center; margin-top: var(--e-10); }
.appel--centre .cta { background: #25113F; color: #FFFFFF; border-color: #25113F; }
.appel--centre .cta:hover, .appel--centre .cta:focus-visible { background: #4E2983; border-color: #4E2983; }
@media (min-width: 600px) and (max-width: 839px) { .appel--centre .appel__titre { font-size: clamp(52px, 7.6vw, 64px); } }
@media (min-width: 840px) { .appel--centre .appel__titre { font-size: var(--t-entete); } }
/* Bande sombre (Academie) : la meme fin que Cours, sur le fond de la bande du directeur, de bord a bord. */
.appel--sombre { max-width: none; padding-inline: max(var(--marge), calc((100vw - var(--contenu)) / 2)); background: #25113F; }

@media (min-width: 840px) {
  /* Hauts de page en texte (Cours, Comment ca marche) : le titre, sa phrase et le bouton dans une colonne. */
  .entete-page--haut-texte .entete-page__texte > *, .entete-page--haut-parcours .entete-page__texte > *,
  .entete-page--haut-texte .entete-page__texte > h1, .entete-page--haut-parcours .entete-page__texte > h1 { grid-column: 1 / span 8; grid-row: auto; }
  .entete-page--haut-texte .hero-intro, .entete-page--haut-parcours .hero-intro { max-width: 52ch; }
  /* Tarifs : le resultat du simulateur part de la 7e colonne, comme le texte des autres sections. */
  .simulator--page > .simulator__result, .simulator--page > .simulator__note, .simulator--page > .cta { grid-column: 7 / -1; }
}
/* Accueil : les deux bouts du sol (le tapis a gauche, le socle a droite) s'effacent au lieu de s'arreter net. */
.porte__scene { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%); mask-image: linear-gradient(to right, transparent 0, #000 9%); }
.portrait--profil { width: min(100%, 300px); }


/* --- Recette 22 (22/10/2026) : chaque page finit a sa facon, les hauts de page remplis ------------------------------ */
/* Fins de page : les tarifs se referment sur leurs deux prix, Familles sur une porte ouverte ; le titre et son bouton
   a gauche, sur les six premieres colonnes, comme le texte des autres sections. */
.appel--prix, .appel--image, .appel--note { display: grid; row-gap: var(--e-12); align-items: center; padding: var(--respire) max(var(--marge), calc((100vw - var(--contenu)) / 2)) calc(var(--respire) + var(--e-8)); }
.appel--prix .appel__titre, .appel--image .appel__titre, .appel--note .appel__titre { max-width: 12em; }
.appel--prix .appel__phrase, .appel--image .appel__phrase, .appel--note .appel__phrase { margin-top: var(--e-6); max-width: 40ch; padding-inline: 0; }
.appel--prix .action-row, .appel--image .action-row, .appel--note .action-row { margin-top: var(--e-10); }
.appel--prix .appel__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
.appel--prix .entete-prix__bloc { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); align-content: start; }
.appel--prix .entete-prix__montant { grid-row: auto; margin-bottom: var(--e-2); font-size: var(--t-affiche); }
.appel--image .appel__image { width: min(100%, 450px); margin-inline: auto; }
@media (min-width: 840px) {
  .appel--prix, .appel--image, .appel--note { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); }
  .appel--prix .appel__texte, .appel--image .appel__texte, .appel--note .appel__texte { grid-column: 1 / span 6; }
  .appel--prix .appel__extra, .appel--image .appel__extra, .appel--note .appel__extra { grid-column: 7 / -1; }
  .appel--prix .appel__titre, .appel--image .appel__titre, .appel--note .appel__titre { font-size: var(--t-entete); }
}

/* Comment ca marche : la taille des classes en grands chiffres a cote du titre, la ou le haut de page restait vide. */
.entete-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-8); padding-bottom: var(--e-10); }
.entete-chiffres__bloc { display: grid; gap: var(--e-1); max-width: none; padding: 0; }
.entete-chiffres__nombre { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-affiche); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.entete-chiffres__libelle { font-weight: 600; font-size: var(--t-corps); }
.entete-chiffres__sous { max-width: 40ch; font-size: var(--t-corps); }
.entete-chiffres__sous { grid-column: 1 / -1; }
@media (min-width: 840px) {
  .entete-page--haut-chiffres { min-height: 0; padding-bottom: 0; align-items: end; }
  .entete-page--haut-chiffres .entete-page__texte { grid-column: 1 / span 9; }
  .entete-page--haut-chiffres .entete-chiffres { grid-column: 1 / -1; grid-row: 2; }
}
/* Les chiffres a cote du titre seulement quand le titre tient en deux lignes sur six colonnes. */
@media (min-width: 1100px) {
  .entete-page--haut-chiffres .entete-page__texte { grid-column: 1 / span 6; align-self: end; padding-bottom: var(--e-10); }
  .entete-page--haut-chiffres .entete-chiffres { grid-column: 7 / -1; grid-row: 1; }
}

/* Cours : l'escalier monte dans le haut de page ; les deux premieres marches sous le texte, les deux dernieres a sa
   hauteur, a droite, la ou le haut de page restait vide. */
@media (min-width: 1100px) {
  .entete-page--haut-parcours { grid-template-rows: auto auto; row-gap: 0; align-items: end; }
  .entete-page--haut-parcours .entete-page__texte { grid-column: 1 / span 6; grid-row: 1; display: block; align-self: start; padding-bottom: var(--e-10); }
  .entete-page--haut-parcours .entete-page__texte > *, .entete-page--haut-parcours .entete-page__texte > h1 { grid-column: auto; grid-row: auto; }
  .entete-page--haut-parcours .hero-intro { margin-top: var(--e-6); max-width: 46ch; }
  .entete-page--haut-parcours .action-row { margin-top: var(--e-8); }
  .entete-page--haut-parcours .parcours--haut { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: end; margin-top: 0; }
  .parcours--haut .parcours__etape:nth-child(1) { grid-column: 1 / span 3; grid-row: 2; min-height: 270px; }
  .parcours--haut .parcours__etape:nth-child(2) { grid-column: 4 / span 3; grid-row: 2; min-height: 360px; }
  .parcours--haut .parcours__etape:nth-child(3) { grid-column: 7 / span 3; grid-row: 1 / span 2; align-self: stretch; min-height: 0; margin-top: clamp(96px, 9vw, 150px); }
  .parcours--haut .parcours__etape:nth-child(4) { grid-column: 10 / span 3; grid-row: 1 / span 2; align-self: stretch; min-height: 0; }
  /* Dans les deux hautes arches, le mot arabe au milieu de l'arche, et non tasse en bas. */
  .parcours--haut .parcours__etape:nth-child(n+3) .parcours__arabe { margin-block: auto; }
}

/* Familles, les horaires : un chiffre dans une arche (les trois séances), et non une deuxieme vue du dessus. */
.section__figure--tuile { display: grid; place-items: center; background: none; padding: 0; }
.tuile-chiffre { display: grid; place-items: center; align-content: center; width: min(100%, 400px); aspect-ratio: 4 / 5; padding: var(--e-10) var(--e-6); border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: #EEE6FA; color: #25113F; text-align: center; max-width: none; }
.tuile-chiffre__grand { font-family: var(--police-titre); font-weight: 600; font-size: clamp(140px, 17vw, 240px); line-height: .9; letter-spacing: -0.05em; }
.tuile-chiffre__petit { margin-top: var(--e-4); font-family: var(--police-titre); font-weight: 600; font-size: var(--t-moyen); }

/* Les cours en bref (encarts du 18/10, mots inchanges) : une fiche a la fois ; le montant en grand chiffre, a gauche,
   les autres lignes a droite, sur la ligne de la septieme colonne. */
.fiches-bloc .fiches:has(.fiche + .fiche) { grid-template-columns: minmax(0, 1fr); }
.fiche__lignes li.fiche__prix { padding-inline-start: 0; font-family: inherit; font-size: var(--t-corps); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.fiche__montant { display: block; margin-bottom: var(--e-2); font-family: var(--police-titre); font-size: var(--t-affiche); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
@media (min-width: 840px) {
  .fiches-bloc .fiche__lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); grid-auto-flow: row dense; align-items: start; }
  .fiches-bloc .fiche__lignes li { grid-column: 2; max-width: 46ch; }
  .fiches-bloc .fiche__lignes li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .fiches-bloc .fiche__lignes li:nth-child(2) { grid-column: 1; grid-row: 2 / span 9; }
}

/* Academie : chaque fondateur sous son portrait, son nom sur une ligne ; les deux portraits a la meme echelle. */
.profils .profil { display: block; }
.profils .profil > .portrait--profil { width: min(100%, 400px); margin-bottom: var(--e-6); }
.profils .profil h3 { min-height: 0; }

/* Accueil, « Un horaire fixe, une classe stable » : le titre a gauche, son texte et ses liens dans la colonne de droite. */
@media (min-width: 1100px) {
  .pousse .pousse__entete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
  .pousse .pousse__entete h2 { grid-column: 1 / span 6; }
  .pousse .pousse__corps { grid-column: 7 / -1; max-width: none; }
}

/* Academie : le bout droit du chemin s'efface au lieu de s'arreter net au bord de l'image (tablette et telephone). */
@media (max-width: 1099px) {
  .entete-page--libre .entete-page__image { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 14%); mask-image: linear-gradient(to left, transparent 0, #000 14%); }
}

/* Accueil : la scene grandit d'une fois et demie au plus ; la classe s'ouvre avant que les visages ne grandissent. */
@media (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  .js .porte__scene { transform: scale(calc(1 + var(--z2, 0) * .5)); }
}

/* Cours : les lettres arabes des arches s'ecrivent, arche apres arche (demande du directeur, 22/10/2026). Les lettres
   separees paraissent une a une, de droite a gauche ; un mot lie s'ecrit d'un trait, de droite a gauche, sans que ses
   lettres soient separees. Avant d'etre ecrit, chaque mot est deja la en filigrane (18 %) : aucune arche n'est vide,
   meme sur une capture. 2 s en tout, une seule fois ; au survol, l'arche s'ecrit de nouveau (motion.js).
   Sans JavaScript ou en mouvement reduit, les lettres sont la, immobiles. */
@keyframes lettre-ecrite { from { opacity: .18; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes lettre-ecrite-bis { from { opacity: .18; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes mot-ecrit { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes mot-ecrit-bis { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .parcours__etape:nth-child(1) { --base: 200ms; }
  .parcours__etape:nth-child(2) { --base: 620ms; }
  .parcours__etape:nth-child(3) { --base: 1000ms; }
  .parcours__etape:nth-child(4) { --base: 1400ms; }
  .js .parcours__lettre { display: inline-block; }
  .js .parcours.est-visible .parcours__lettre { animation: lettre-ecrite 360ms var(--mv-accentuee) calc(var(--base, 0ms) + var(--l, 0) * 110ms) both; }
  .js .parcours__mot { display: inline-block; padding: .25em .2em; margin: -.25em -.2em; -webkit-mask-image: linear-gradient(to left, #000 45%, rgb(0 0 0 / .18) 55%); mask-image: linear-gradient(to left, #000 45%, rgb(0 0 0 / .18) 55%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  .js .parcours.est-visible .parcours__mot { animation: mot-ecrit 600ms cubic-bezier(.45, 0, .25, 1) var(--base, 0ms) both; }
  .js .parcours__etape.rejoue-a, .js .parcours__etape.rejoue-b { --base: 0ms; }
  .js .parcours.est-visible .rejoue-a .parcours__lettre { animation-name: lettre-ecrite-bis; }
  .js .parcours.est-visible .rejoue-a .parcours__mot { animation-name: mot-ecrit-bis; }
}

/* --- Recette 23 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Comment ca marche : une seule fin, le titre et son bouton a gauche, l'inscription d'un enfant a droite. */
.appel__note { padding: var(--e-8); border-radius: var(--r-lg); background: #4E2983; color: #FFFFFF; }
.appel__note h3 { font-size: var(--t-moyen); }
.appel__note p { margin-top: var(--e-3); max-width: 46ch; }
.appel__note .section-links { margin-top: var(--e-6); }
/* Academie : l'arche a gauche, le titre a droite (Familles a l'inverse). */
@media (min-width: 840px) {
  .appel--image-gauche .appel__texte { grid-column: 7 / -1; grid-row: 1; }
  .appel--image-gauche .appel__extra { grid-column: 1 / span 6; grid-row: 1; }
}

/* Cours : le mot arabe occupe les deux tiers de son arche, a la taille des grands chiffres du site. */
@media (min-width: 1100px) {
  .parcours--haut .parcours__etape:has(.parcours__mot) .parcours__arabe { font-size: var(--t-affiche); }
}

/* Les cours en bref : la premiere ligne de l'encart sert de sous-titre, le montant en tres grand ; a droite, les autres
   lignes sans puce, plus grandes, espacees. Les mots ne changent pas. */
.fiches-bloc .fiche__lignes li:nth-child(1) { padding-inline-start: 0; font-weight: 600; }
.fiches-bloc .fiche__lignes li:nth-child(1)::before { content: none; }
.fiche__montant { font-size: var(--t-affiche); }
@media (min-width: 840px) {
  .fiches-bloc .fiche__lignes { row-gap: var(--e-5); }
  .fiches-bloc .fiche__lignes li:nth-child(n+3) { padding-inline-start: 0; }
  .fiches-bloc .fiche__lignes li:nth-child(n+3)::before { content: none; }
}

/* Accueil, le prix : ce qui vaut pour les enfants comme pour les adultes, une seule fois, sous les deux prix. */
.deux-champs__communs { list-style: none; display: grid; gap: var(--e-4) var(--e-6); max-width: calc(var(--contenu) + 2 * var(--marge)); margin: var(--e-10) auto 0; padding-inline: var(--marge); font-size: var(--t-corps); font-weight: 500; }
.deux-champs__communs li { position: relative; padding-inline-start: 1.4em; max-width: none; text-wrap: pretty; }
.deux-champs__communs li::before { content: ''; position: absolute; inset-inline-start: 0; top: .5em; width: .6em; height: .75em; border-radius: var(--arche); background: currentColor; opacity: .55; }
@media (min-width: 600px) { .deux-champs__communs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .deux-champs__communs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Recette 24 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Cours : la derniere arche en lavande, et non en blanc pur ; le mot arabe dans sa couleur. */
[data-ambiance="violet"] .parcours--haut .parcours__etape:nth-child(4) { background: #EEE6FA; color: #25113F; }
[data-ambiance="violet"] .parcours--haut .parcours__etape:nth-child(4) .parcours__arabe { color: #4E2983; }

/* Accueil, les questions des familles : un accordeon sur une colonne, le titre et ses liens a gauche. */
.faq-ouverte__liste { gap: var(--e-3); }
.faq-ouverte__question details { padding: var(--e-6) var(--e-8); border-radius: var(--r-lg); background: #4E2983; }
.faq-ouverte__question summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); list-style: none; cursor: pointer; }
.faq-ouverte__question summary::-webkit-details-marker { display: none; }
.faq-ouverte__question summary h3 { margin: 0; max-width: none; }
.faq-ouverte__question summary::after { content: ''; flex: none; width: 12px; height: 12px; margin-top: -6px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform var(--mv-micro) var(--mv-entree); }
.faq-ouverte__question details[open] summary::after { margin-top: 6px; transform: rotate(-135deg); }
.faq-ouverte__question summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 6px; border-radius: var(--r-xs); }
.faq-ouverte__question details p { margin-top: var(--e-4); }
@media (min-width: 840px) {
  .faq-ouverte { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; }
  .faq-ouverte .faq-ouverte__tete { grid-column: 1 / span 5; }
  .faq-ouverte .faq-ouverte__liste { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-3); }
}

/* Accueil, le prix : ce qui vaut pour tous, en tuiles, sans puce ; l'observation, une phrase sous le prix enfant. */
.deux-champs__communs li { padding: var(--e-6); border-radius: var(--r-lg); background: #4E2983; font-weight: 600; }
.deux-champs__communs li::before { content: none; }
.champ__plus { margin-top: var(--e-3); max-width: 44ch; }

/* Accueil, les chapitres : la premiere phrase plus grande, le texte au milieu de l'arche epinglee, moins de vide. */
@media (min-width: 840px) {
  .chapitre { min-height: 72svh; }
  .chapitre h2 + p { font-size: var(--t-moyen); line-height: 1.35; }
}

/* Accueil : la porte grandit d'un quart au plus, autour de l'entree, et reste au centre de son cadre. */
@media (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  .js .porte__scene { transform: scale(calc(1 + var(--z2, 0) * .25)); }
}

/* --- Recette 25 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil : la fin a un vrai bouton, au centre sous la phrase. */
.appel--porte .action-row { justify-content: center; margin-top: var(--e-8); }

/* Accueil, les chapitres : les points en pastilles sur une ligne, a la taille du texte, et non en petites puces. */
.chapitre ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-6); padding: 0; }
.chapitre ul li { padding: var(--e-2) var(--e-4); border-radius: var(--r-full); background: #4E2983; font-size: var(--t-petit); font-weight: 600; }
.chapitre .points .puce { display: none; }

/* Cours, tablette et telephone : le mot arabe a la mesure de son arche (unites de conteneur). */
@media (max-width: 1099px) {
  .parcours--haut .parcours__etape { container-type: inline-size; }
  .parcours--haut .parcours__arabe { font-size: 17cqi; }
  .parcours--haut .parcours__etape:has(.parcours__mot) .parcours__arabe { font-size: 26cqi; }
}
@media (max-width: 599px) {
  .parcours--haut .parcours__etape { container-type: normal; }
  .parcours--haut .parcours__arabe { font-size: 36px; }
  .parcours--haut .parcours__etape:has(.parcours__mot) .parcours__arabe { font-size: 44px; }
}

/* Academie : une ligne dit, au-dessus des deux portraits, que le directeur est presente plus haut. */
.profils__intro { margin-top: var(--e-12); font-weight: 600; }
.profils__intro + .profils { margin-top: var(--e-6); }

/* --- Apres la recette 25 : les deux autres fondateurs sur l'accueil, dans la bande « Accompagné à chaque étape » --- */
.panneau__fondateurs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); max-width: calc(424px + 2 * var(--marge)); padding: 0 var(--marge); }
.panneau__fondateurs li { display: grid; justify-items: start; gap: var(--e-3); }
.panneau__fondateurs p { display: grid; gap: var(--e-1); }
.portrait--vignette { width: min(100%, 300px); margin: 0; flex: none; }
.portrait--vignette .portrait__cadre { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.portrait--vignette img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 839px) { .panneau__fondateurs { order: 4; } }


/* --- Recette 27 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil, les chapitres : le titre plus grand tient sur deux lignes ; la fenetre de l'arche cede une colonne au texte. */
@media (min-width: 840px) {
  .chapitre h2 { font-size: var(--t-entete); max-width: none; text-wrap: balance; }
  .chapitres__fenetre { grid-column: 1 / span 5; }
  .chapitres__textes { grid-column: 6 / span 7; }
}

/* Les cours en bref (Familles, Cours) : le prix, sa phrase juste dessous, puis les tuiles sur une grille de six colonnes,
   de meme largeur dans une rangee (places calculees au build, bloc_tarifs.places_fiche) ; le choix Enfants / Adultes en
   haut a droite, a la hauteur du titre de la fiche. */
@media (min-width: 840px) {
  .fiches-bloc { position: relative; }
  .fiches-bloc .fiches__choix { position: absolute; top: 0; right: 0; margin-top: 0; }
  .fiches-bloc .fiche__lignes { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--e-4); row-gap: var(--e-4); align-items: stretch; }
  .fiches-bloc .fiche__lignes li { grid-column: var(--c, span 2); grid-row: var(--r, auto); max-width: none; }
  .fiches-bloc .fiche__lignes li:nth-child(1) { grid-column: var(--c, 1 / -1); grid-row: var(--r, 2); max-width: 46ch; min-height: 0; margin: 0 0 var(--e-6); }
  .fiches-bloc .fiche__lignes li:nth-child(2) { grid-column: var(--c, 1 / -1); grid-row: var(--r, 1); margin: 0; }
  .fiches-bloc .fiche__lignes li:nth-child(n+3) { padding: var(--e-5) var(--e-6); border-radius: var(--r-lg); background: #4E2983; }
  .fiches-bloc .fiche__lignes li:nth-child(n+3)::before { content: none; }
}

/* Accueil, « Accompagné à chaque étape » : a gauche la photo du directeur, puis les trois engagements les uns sous les
   autres ; a droite le texte et le lien, puis les deux autres fondateurs en grand. Les deux colonnes finissent ensemble. */
.panneau__fondateurs { max-width: calc(624px + 2 * var(--marge)); }
.panneau__fondateurs .mot__nom { font-size: var(--t-corps); }
@media (max-width: 839px) { .panneau__fondateurs .mot__nom { min-height: 2lh; } }
@media (min-width: 840px) {
  .panneau__in, .panneau__photo { grid-row: 1; }
  .panneau > .panneau__fondateurs { grid-column: 2; grid-row: 2; max-width: 624px; padding: 0; column-gap: var(--e-6); }
  .panneau__promesses { grid-column: 1; grid-row: 2; grid-template-columns: none; row-gap: var(--e-8); align-content: start; }
  .panneau__promesses h3 { max-width: none; }
}

/* Texte secondaire : 20 px au bureau, 18 px en dessous ; le pied de page reste a 18 px. */
@media (min-width: 840px) { :root { --t-petit: 20px; } .site-footer__inner, .site-footer .footer-identity p, .site-footer .footer-identity address, .footer-legal, .footer-bottom { font-size: 18px; } }

/* Accueil : le bouton qui arrete le tapis dit ce qu'il fait, en toutes lettres. */
.porte__texte .pause-anim { width: auto; height: 44px; padding: 0 var(--e-5) 0 var(--e-4); grid-auto-flow: column; gap: var(--e-2); border-radius: var(--r-full); background: transparent; color: inherit; font-size: var(--t-petit); font-weight: 600; justify-self: start; }
.porte__texte .pause-anim .sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

/* Fins de page a une colonne (telephone) : la colonne ne s'elargit pas a la mesure d'une adresse e-mail (360 px). */
@media (max-width: 839px) { .appel--prix, .appel--image, .appel--note { grid-template-columns: minmax(0, 1fr); } }
.appel__note { overflow-wrap: anywhere; }

/* --- Recette 28 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Texte courant un peu plus grand au bureau (21 px a 1440) ; le petit texte suit a 20 px. */
@media (min-width: 840px) { :root { --t-corps: clamp(18px, 0.35vw + 16px, 21px); } }

/* Tarifs, les dates du paiement : une rangee de cinq etapes au bureau, chacune marquee d'une petite arche, sur fond prune. */
.remises--echeances .remise::before { content: ""; width: .6em; height: .75em; border-radius: var(--arche); background: currentColor; opacity: .55; }
@media (min-width: 1100px) {
  .remises--echeances { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--e-6); }
  .remises--echeances .remise__valeur { font-size: clamp(28px, 2.5vw, 36px); }
  .remises--echeances .remise__objet { max-width: none; }
}

/* Academie, « Ce que nous enseignons » : l'arche a gauche, le titre et les deux paragraphes a droite, alignes sur le haut
   de l'arche (bande pleine a deux paragraphes, sans colonne de cote ; des 1100 px). */
@media (min-width: 1100px) {
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) { align-items: start; }
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) .pleine__image { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) .pleine__tete { grid-column: 7 / -1; grid-row: 1; align-self: end; }
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) .pleine__corps { grid-column: 7 / -1; grid-row: 2; }
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) .pleine__texte { columns: auto; font-size: clamp(20px, 1.55vw, 23px); }
}

/* Accueil : le bouton d'arret du tapis, plus discret que les deux boutons d'action (un texte avec son signe, sans bord). */
.porte__texte .pause-anim { height: 36px; padding: 0 var(--e-2) 0 0; border: 0; font-size: 16px; font-weight: 500; opacity: .85; }
.porte__texte .pause-anim:hover { background: transparent; opacity: 1; text-decoration: underline; }

/* --- Recette 29 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil : chaque chapitre a la hauteur de la fenetre de l'arche ; le titre du suivant n'entre plus dans l'image. Le
   second paragraphe, plus grand, ne se lit plus comme une note. */
@media (min-width: 840px) {
  .chapitre { min-height: calc(100svh - var(--entete) - 8svh); }
  .chapitre p + p { font-size: clamp(19px, 1.45vw, 22px); }
}

/* Telephone et tablette : le bouton du tapis garde son signe et son mot ensemble, au bord du texte. */
.porte__texte .pause-anim { display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; gap: var(--e-2); }

/* Tarifs, les remises : chaque remise dans une tuile coiffee d'une arche, le chiffre au centre. */
.remises:not(.remises--echeances) .remise { padding: var(--e-10) var(--e-6) var(--e-8); border-radius: 50% 50% var(--r-lg) var(--r-lg) / 72px 72px var(--r-lg) var(--r-lg); background: #4E2983; text-align: center; justify-items: center; }
.remises:not(.remises--echeances) .remise__objet { max-width: 30ch; }

/* Tarifs, les dates du paiement : au bureau, les cinq etapes sur un meme rail, chacune posee sur sa petite arche. */
.remises--echeances .remise::before { opacity: 1; background: #DCCAFD; }
@media (min-width: 1100px) {
  .remises--echeances { position: relative; }
  .remises--echeances::before { content: ""; position: absolute; inset-inline: 0; top: calc(.75em - 3px); height: 3px; border-radius: 3px; background: #DCCAFD; opacity: .35; }
}

/* Familles, telephone : la tuile du « 3 » a la hauteur de son contenu. */
@media (max-width: 839px) { .tuile-chiffre { aspect-ratio: auto; padding-block: var(--e-12) var(--e-10); } }

/* --- Recette 30 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil, chapitres : chacun occupe un ecran entier (le titre du suivant n'entre jamais dans l'image), et ses deux
   paragraphes ont la meme taille. */
@media (min-width: 840px) {
  .chapitre { min-height: 100svh; }
  .chapitre h2 + p, .chapitre p + p { font-size: var(--t-moyen); line-height: 1.35; }
}

/* Les cours en bref : les phrases courtes ne sont plus des tuiles, mais des lignes marquees de la petite arche, sous les
   tuiles ; la grille occupe toute la largeur de la fiche. */
@media (min-width: 840px) {
  .fiches-bloc .fiches .fiche, .fiches-bloc .fiches .fiche:first-child { padding-inline: 0; }
  .fiches-bloc .fiche__lignes { width: 100%; margin-inline: 0; padding-inline: 0; }
  .fiches-bloc .fiche__lignes li.fiche__court { justify-self: start; }
}

/* Tarifs, les remises : quatre colonnes ; les deux remises aux longues legendes prennent chacune deux colonnes, pour
   qu'aucune tuile ne reste vide sous sa ligne ; chiffre et legende alignes a gauche. */
.remises:not(.remises--echeances) .remise { text-align: start; justify-items: start; padding: var(--e-10) var(--e-8) var(--e-8); }
@media (min-width: 1100px) {
  .remises:not(.remises--echeances) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
  .remises:not(.remises--echeances):has(> li:nth-child(6):last-child) > li:nth-child(n+5) { grid-column: span 2; }
}

/* Tarifs, les dates du paiement : au bureau, une frise verticale (la date a gauche, le texte a droite, les arches sur
   un meme fil), et la phrase d'introduction a cote. */
@media (min-width: 1100px) {
  .section--large:has(.remises--echeances) .section__corps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-16); align-items: start; }
  .section--large:has(.remises--echeances) .section__corps > p { grid-column: 2; grid-row: 1; margin-top: var(--e-10); }
  .section--large:has(.remises--echeances) .section__corps > .remises--echeances { grid-column: 1; grid-row: 1; }
  .remises--echeances { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .remises--echeances::before { inset: .5em auto .5em calc(.3em - 1.5px); width: 3px; height: auto; top: .5em; }
  .remises--echeances .remise { position: relative; grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--e-6); align-items: baseline; padding: 0 0 var(--e-8) calc(.6em + var(--e-6)); }
  .remises--echeances .remise::before { position: absolute; inset-inline-start: 0; top: .45em; }
  .remises--echeances .remise__valeur { font-size: clamp(28px, 2.3vw, 34px); }
}

/* Tarifs, ce que coute une famille : les quatre totaux en tuiles coiffees d'une arche, sur la bande lavande. */
@media (min-width: 840px) {
  .price-table--famille thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .price-table--famille tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  .price-table--famille tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--e-2); padding: var(--e-12) var(--e-6) var(--e-6); border-radius: 50% 50% var(--r-lg) var(--r-lg) / 64px 64px var(--r-lg) var(--r-lg); }
  .price-table--famille tbody tr:nth-child(n) { background: #FFFFFF; }
  .price-table--famille tbody th, .price-table--famille tbody td { padding: 0; text-align: start; }
  .price-table--famille tbody td { font-size: clamp(28px, 2.6vw, 40px); }
}

/* Tarifs, a savoir avant de commander : les cinq points sur deux colonnes, chacun avec sa puce (pas de tuiles : la page
   en a deja deux series). */
@media (min-width: 840px) {
  #conditions .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-10); }
}

/* Accueil : le mot du bouton du tapis un peu plus grand. */
.porte__texte .pause-anim { font-size: 18px; }

/* --- Recette 31 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Les cours en bref, a toutes les largeurs : les phrases longues en tuiles, les courtes en pastilles calees a gauche,
   marquees de la petite arche. */
.fiches-bloc .fiche__lignes li:nth-child(n+3):not(.fiche__court) { padding: var(--e-5) var(--e-6); border-radius: var(--r-lg); background: #4E2983; }
.fiches-bloc .fiche__lignes li:nth-child(n+3):not(.fiche__court)::before { content: none; }
.fiches-bloc .fiche__lignes li.fiche__court { justify-self: start; padding: var(--e-3) var(--e-6) var(--e-3) calc(var(--e-5) + 1em); border-radius: var(--r-full); background: #4E2983; font-weight: 600; }
.fiches-bloc .fiche__lignes li.fiche__court::before { content: ""; inset-inline-start: var(--e-4); top: calc(var(--e-3) + .35em); }
@media (min-width: 840px) { .fiches-bloc .fiche__lignes li.fiche__court { margin-top: calc(-1 * var(--e-2)); } }

/* Tarifs, a savoir avant de commander : le titre, puis les deux paragraphes cote a cote, puis les cinq points en tuiles
   coiffees d'une arche, trois puis deux, comme les remises. */
@media (min-width: 1100px) {
  #conditions .section__titre { grid-column: 1 / -1; position: static; }
  #conditions .section__corps { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--e-4); align-items: start; }
  #conditions .section__corps > p { grid-column: span 3; max-width: 52ch; margin: 0; }
  #conditions .section__corps > .points, #conditions .section__corps > .section-links { grid-column: 1 / -1; }
  #conditions .points { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-10); }
  #conditions .points li { grid-column: span 2; padding: var(--e-10) var(--e-8) var(--e-8); border-radius: 50% 50% var(--r-lg) var(--r-lg) / 72px 72px var(--r-lg) var(--r-lg); background: #4E2983; }
  #conditions .points li:nth-child(n+4) { grid-column: span 3; }
  #conditions .points .puce { display: none; }
}

/* Tarifs : au telephone, les quatre remises courtes deux par rangee, les deux longues sur toute la largeur ; le cout
   d'une famille en tuiles a toutes les largeurs. */
@media (max-width: 1099px) {
  .remises:not(.remises--echeances) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  .remises:not(.remises--echeances):has(> li:nth-child(6):last-child) > li:nth-child(n+5) { grid-column: 1 / -1; }
  .remises:not(.remises--echeances) .remise { padding: var(--e-8) var(--e-5) var(--e-6); }
}
@media (max-width: 839px) {
  .price-table--famille thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .price-table--famille tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .price-table--famille tbody tr, .price-table--famille tbody tr:nth-child(n) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-10) var(--e-5) var(--e-5); border-radius: 50% 50% var(--r-lg) var(--r-lg) / 48px 48px var(--r-lg) var(--r-lg); background: #FFFFFF; }
  .price-table--famille tbody th, .price-table--famille tbody td { padding: 0; text-align: start; }
}

/* Accueil, le prix : les deux montants plus grands ; les quatre points communs en tuiles coiffees d'une arche. */
@media (min-width: 840px) { .champ__montant { font-size: clamp(72px, 8.4vw, 124px); } }
.deux-champs__communs li { padding: var(--e-10) var(--e-6) var(--e-6); border-radius: 50% 50% var(--r-lg) var(--r-lg) / 64px 64px var(--r-lg) var(--r-lg); }

/* Academie, « Ce que nous enseignons » : l'arche a droite, pour que les deux bandes voisines ne se repetent pas. */
@media (min-width: 1100px) {
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) .pleine__image { grid-column: 8 / -1; }
  .section--pleine:has(.pleine__texte > p:nth-child(2):last-child):not(:has(.pleine__plus)) :is(.pleine__tete, .pleine__corps) { grid-column: 1 / span 6; }
}

/* --- Recette 32 (22/10/2026) ------------------------------------------------------------------------------------- */
/* Telephone : dans les tuiles du cout d'une famille, le nombre d'enfants au-dessus du montant, jamais l'un sur l'autre. */
@media (max-width: 839px) {
  .price-table--famille tbody tr th, .price-table--famille tbody tr td { grid-column: 1; text-align: start; }
}

/* Deux formes seulement : l'arche pour les chiffres (remises, cout d'une famille), l'angle arrondi pour les notes. */
.deux-champs__communs li { border-radius: var(--r-lg); padding: var(--e-6); }

/* Les cours en bref : les phrases courtes en tuiles de meme largeur sous les longues (deux de trois colonnes ou trois
   de deux), avec le meme aspect. */
.fiches-bloc .fiche__lignes li.fiche__court { justify-self: stretch; margin-top: 0; padding: var(--e-5) var(--e-6); border-radius: var(--r-lg); }
.fiches-bloc .fiche__lignes li.fiche__court::before { content: none; }

/* Tarifs, a savoir avant de commander : des tuiles a toutes les largeurs (une colonne au telephone, deux sur tablette,
   trois puis deux au bureau), a angles arrondis. */
#conditions .points li { padding: var(--e-5) var(--e-6); border-radius: var(--r-lg); background: #4E2983; }
#conditions .points .puce { display: none; }
@media (min-width: 600px) and (max-width: 1099px) {
  #conditions .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  #conditions .points li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { #conditions .points li { padding: var(--e-6) var(--e-8); border-radius: var(--r-lg); } }

/* Accueil, questions des familles : la colonne du titre reste a l'ecran le long des questions. */
@media (min-width: 840px) { .faq-ouverte .faq-ouverte__tete { position: sticky; top: calc(var(--entete) + var(--e-8)); align-self: start; } }

/* --- Recette 33 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Une seule forme pour les tuiles d'information, chiffres compris : l'angle arrondi de 24 px. L'arche reste aux images.
   Les tuiles des remises et des notes prennent la hauteur de leur texte. */
.remises:not(.remises--echeances) .remise, .price-table--famille tbody tr, .price-table--famille tbody tr:nth-child(n) { border-radius: var(--r-lg); }
.remises:not(.remises--echeances) .remise { padding: var(--e-6) var(--e-6) var(--e-6); }
.price-table--famille tbody tr, .price-table--famille tbody tr:nth-child(n) { padding: var(--e-6); }
.remises:not(.remises--echeances), #conditions .points, .deux-champs__communs { align-items: start; }
@media (max-width: 839px) { .price-table--famille tbody tr td, .price-table--famille tbody tr td:only-of-type { text-align: start; } }

/* Tarifs, les dates du paiement : le titre et sa phrase en haut, puis la frise sur toute la largeur (la date a gauche,
   sa phrase sur une ligne a droite) : plus de colonne vide a cote de la frise. */
@media (min-width: 1100px) {
  .section--large:has(.remises--echeances) .section__corps { display: block; }
  .section--large:has(.remises--echeances) .section__corps > p { margin-top: 0; max-width: 56ch; }
  .section--large:has(.remises--echeances) .section__corps > .remises--echeances { margin-top: var(--e-10); }
  .remises--echeances .remise { grid-template-columns: 200px minmax(0, 1fr); }
}


/* --- Recette 34 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Tuiles : dans une rangee, la meme hauteur ; le chiffre en haut, la phrase en bas (remises) ; le texte au milieu
   quand il n'y a pas de chiffre (notes, cours en bref). */
.remises:not(.remises--echeances), #conditions .points, .deux-champs__communs { align-items: stretch; }
.remises:not(.remises--echeances) .remise { display: flex; flex-direction: column; gap: var(--e-3); }
.remises:not(.remises--echeances) .remise__objet { margin-top: auto; }
#conditions .points li, .deux-champs__communs li { display: flex; align-items: center; }
.fiches-bloc .fiche__lignes li:nth-child(n+3) { display: flex; flex-direction: column; justify-content: center; }

/* Familles, telephone : la tuile du « 3 » garde une vraie arche (carree, sommet en demi-cercle). */
@media (max-width: 839px) { .tuile-chiffre { aspect-ratio: 1 / 1; border-radius: 9999px 9999px 0 0; padding-top: var(--e-16); } }

/* En-tete, des 1100 px : l'action principale, « Commencer mon inscription », en bouton plein ; « Se connecter » en lien. */
.site-header__inscription { display: none; }
@media (min-width: 1100px) {
  .site-header__inscription { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--e-6); border-radius: var(--r-full); background: #FFFFFF; color: #25113F; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .site-header__inscription:hover { background: #EEE6FA; }
  .site-header__connexion { border: 0; padding-inline: 0; font-weight: 500; }
  .site-header__connexion:hover { background: none; text-decoration: underline; }
}

/* --- Recette 35 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil, chapitres : le texte de chaque chapitre reste a l'ecran a cote de l'arche jusqu'a ce que le suivant le
   pousse ; plus de colonne vide entre deux chapitres. */
@media (min-width: 840px) {
  .chapitre { display: block; min-height: 100svh; padding-block: 18svh 0; }
  .chapitre__texte { position: sticky; top: calc(var(--entete) + 14svh); }
}

/* En-tete : le bouton d'inscription a toutes les largeurs (« S'inscrire » sous 1100 px, a cote du menu). */
.site-header__inscription { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--e-5); border-radius: var(--r-full); background: #FFFFFF; color: #25113F; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-header__long { display: none; }
@media (min-width: 1100px) { .site-header__long { display: inline; } .site-header__court { display: none; } }
@media (max-width: 839px) { .site-header__inscription { margin-inline-start: auto; } .site-header__inscription + .mobile-menu { margin-inline-start: 0; } .site-header__inner { gap: var(--e-3); } }

/* Tarifs, les remises : une liste sans boites, le chiffre en grand a gauche, sa phrase a droite, sur deux colonnes. */
.remises:not(.remises--echeances) .remise { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: baseline; column-gap: var(--e-5); padding: 0; border-radius: 0; background: none; text-align: start; }
.remises:not(.remises--echeances) .remise__objet { margin-top: 0; }
.remises:not(.remises--echeances) { grid-template-columns: minmax(0, 1fr); gap: var(--e-8) var(--e-16); }
.remises:not(.remises--echeances):has(> li:nth-child(6):last-child) > li:nth-child(n+5) { grid-column: auto; }
@media (min-width: 840px) { .remises:not(.remises--echeances) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .remises:not(.remises--echeances) .remise { grid-template-columns: 150px minmax(0, 1fr); } }

/* Tarifs, a savoir : une liste sur deux colonnes, chaque point avec sa puce, sans boites. */
#conditions .points li { display: flex; padding: 0; border-radius: 0; background: none; }
#conditions .points .puce { display: inline-block; }
@media (min-width: 600px) { #conditions .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-10); } #conditions .points li, #conditions .points li:nth-child(n+4), #conditions .points li:last-child:nth-child(odd) { grid-column: auto; } }

/* Tarifs, dates du paiement : les petites arches sans le fil qui les reliait. */
.remises--echeances::before { content: none; }

/* --- Recette 37 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Tarifs, les dates du paiement : au bureau, cinq arches qui montent, comme les etapes de Cours, chacune portant sa
   date en grand ; la phrase sous l'arche. Empilees sur tablette et au telephone. */
@media (min-width: 1100px) {
  #echeances .remises--echeances { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--e-4); row-gap: 0; margin-top: var(--e-12); }
  #echeances .remises--echeances .remise { grid-row: span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-5); padding: 0; }
  #echeances .remises--echeances .remise::before { content: none; }
  #echeances .remises--echeances .remise__valeur { align-self: end; display: flex; align-items: flex-end; padding: 0 var(--e-5) var(--e-6); border-radius: var(--arche); background: #4E2983; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.05; text-wrap: balance; }
  #echeances .remises--echeances .remise:nth-child(1) .remise__valeur { min-height: 200px; }
  #echeances .remises--echeances .remise:nth-child(2) .remise__valeur { min-height: 245px; background: #8652E6; }
  #echeances .remises--echeances .remise:nth-child(3) .remise__valeur { min-height: 290px; background: #BA98FB; color: #25113F; }
  #echeances .remises--echeances .remise:nth-child(4) .remise__valeur { min-height: 335px; background: #DCCAFD; color: #25113F; }
  #echeances .remises--echeances .remise:nth-child(5) .remise__valeur { min-height: 380px; background: #FFFFFF; color: #25113F; }
  #echeances .remises--echeances .remise__objet { align-self: start; }
}
/* Tarifs, les dates du paiement sous 1100 px : les memes arches, l'une sous l'autre, de plus en plus hautes ; la phrase a
   cote de son arche. */
@media (max-width: 1099px) {
  #echeances .remises--echeances { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-4); }
  #echeances .remises--echeances .remise { position: static; display: grid; grid-template-columns: clamp(124px, 24vw, 184px) minmax(0, 1fr); align-items: end; column-gap: var(--e-5); padding: 0; }
  #echeances .remises--echeances .remise::before { content: none; }
  #echeances .remises--echeances .remise__valeur { display: flex; align-items: flex-end; padding: 0 var(--e-3) var(--e-4); border-radius: var(--arche); background: #4E2983; font-size: clamp(20px, 4.2vw, 32px); line-height: 1.05; text-wrap: balance; }
  #echeances .remises--echeances .remise:nth-child(1) .remise__valeur { min-height: 120px; }
  #echeances .remises--echeances .remise:nth-child(2) .remise__valeur { min-height: 140px; background: #8652E6; }
  #echeances .remises--echeances .remise:nth-child(3) .remise__valeur { min-height: 160px; background: #BA98FB; color: #25113F; }
  #echeances .remises--echeances .remise:nth-child(4) .remise__valeur { min-height: 180px; background: #DCCAFD; color: #25113F; }
  #echeances .remises--echeances .remise:nth-child(5) .remise__valeur { min-height: 200px; background: #FFFFFF; color: #25113F; }
  #echeances .remises--echeances .remise__objet { align-self: end; padding-bottom: var(--e-3); }
}
/* Tarifs, ce que coute une famille : le titre en haut, puis les quatre totaux sur une rangee, en grands chiffres. */
@media (min-width: 1100px) {
  #famille .section__titre { position: static; }
  #famille .section__corps { grid-column: 1 / -1; max-width: none; }
  #famille .price-table--famille, #famille .price-table--famille caption { display: block; width: 100%; }
  #famille .price-table--famille tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); }
  #famille .price-table--famille tbody tr, #famille .price-table--famille tbody tr:nth-child(n) { padding: var(--e-8) var(--e-6) var(--e-6); }
  #famille .price-table--famille tbody td { font-size: clamp(34px, 3.2vw, 46px); line-height: 1; white-space: nowrap; }
  #famille .price-table caption { padding-bottom: var(--e-5); }
}
@media (max-width: 1099px) { #famille .price-table--famille tbody td { font-size: clamp(28px, 4.6vw, 40px); line-height: 1.1; } }
/* Tarifs, a savoir : la regle la plus forte (pas d'essai, la premiere semaine remboursee) en grande phrase, d'abord ;
   les autres points en deux colonnes, sans puces ; les deux paragraphes ensuite, en petit. */
@media (min-width: 840px) {
  #conditions .section__corps { display: flex; flex-direction: column; gap: var(--e-4); }
  #conditions .points li { align-items: flex-start; }
  #conditions .section__corps > .points { order: -1; margin-top: 0; margin-bottom: var(--e-10); row-gap: var(--e-5); }
  #conditions .section__corps > p { max-width: 62ch; }
  #conditions .points .puce { display: none; }
  #conditions .points li:first-child { grid-column: 1 / -1; margin-bottom: var(--e-6); font-family: var(--police-titre); font-size: clamp(34px, 3.2vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
}
/* Tarifs, les remises : au bureau, six grands chiffres sur deux rangees de trois, leur phrase dessous. */
@media (min-width: 840px) {
  .remises:not(.remises--echeances) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-12) var(--e-10); }
  .remises:not(.remises--echeances) .remise { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-3); align-content: start; }
  .remises:not(.remises--echeances) .remise__valeur { font-size: var(--t-entete); }
  .remises:not(.remises--echeances) .remise__objet { max-width: 30ch; }
}
/* Accueil, chapitres : le texte se tient au milieu de l'arche epinglee (meme axe horizontal), le vide se partage
   au-dessus et au-dessous au lieu de tomber tout en bas. */
@media (min-width: 840px) {
  .chapitre { padding-block: 20svh 0; }
  /* Le premier descend plus bas : remonte de sa demi-hauteur, son texte ne couvre pas la phrase qui le precede. */
  .chapitre:first-child { min-height: 112svh; padding-top: 36svh; }
  .chapitre__texte { top: calc(50svh + var(--entete) / 2); translate: 0 -50%; }
  /* Le dernier a la hauteur de la fenetre : son texte se centre dans le chapitre, sans epinglage, et part avec l'image. */
  .chapitre:last-child { display: flex; flex-direction: column; justify-content: center; }
  .chapitre:last-child .chapitre__texte { position: static; translate: none; }
}
/* Le texte qui sort s'efface avant que l'arche change d'image (valeur posee par motion.js) ; efface, il ne prend plus
   les clics. Ecran seulement, et pas en mouvement reduit : rien ne manque a l'impression ni a qui coupe le mouvement. */
@media screen and (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  .chapitre__texte > *, .chapitre__texte .insecable { opacity: var(--sortie, 1); }
  .chapitre__texte[data-efface]:not(:focus-within) { pointer-events: none; }
  .chapitre__texte:focus-within > *, .chapitre__texte:focus-within .insecable { opacity: 1; }
}

/* Cours, « Trois seances par semaine » : l'arche a gauche, le titre et le texte a droite (la bande d'avant a son image
   a droite). */
@media (min-width: 700px) {
  .page-cours #groupes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); align-items: center; row-gap: var(--e-6); }
  .page-cours #groupes .pleine__image { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .page-cours #groupes .pleine__tete { grid-column: 8 / -1; grid-row: 1; align-self: end; }
  .page-cours #groupes .pleine__corps { grid-column: 8 / -1; grid-row: 2; align-self: start; grid-template-columns: minmax(0, 1fr); }
  .page-cours #groupes .pleine__tete h2 { max-width: none; }
  .page-cours #groupes .pleine__texte { grid-column: 1 / -1; columns: auto; }
  .page-cours #groupes .section-links { display: grid; justify-items: start; gap: var(--e-2); }
}

/* Accueil : le bouton d'arret du tapis devient un rond avec son seul signe ; son nom reste lu et s'affiche au survol. */
.porte__texte .pause-anim { display: inline-grid; place-items: center; justify-content: center; align-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgb(255 255 255 / .7); border-radius: 50%; background: rgb(255 255 255 / .14); opacity: 1; }
.porte__texte .pause-anim:hover { background: rgb(255 255 255 / .24); text-decoration: none; }
.porte__texte .pause-anim .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Recette 39 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Accueil, chapitres : chaque chapitre se colle sous l'en-tete, a la hauteur de l'ecran, son texte au milieu de
   l'arche epinglee. Le suivant monte par-dessus et son texte se fond dans le precedent au meme endroit (valeurs
   posees par motion.js) ; l'arche change d'image a mi-fondu. Ecran, mouvement accepte et script charge seulement :
   sinon les chapitres se suivent comme avant. */
@media screen and (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  html.js .chapitres .chapitre { position: sticky; top: var(--entete); display: flex; flex-direction: column; justify-content: center; height: calc(100svh - var(--entete)); min-height: 0; padding: 0; pointer-events: none; }
  html.js .chapitres .chapitre:first-child { margin-top: 0; }
  html.js .chapitres .chapitres__textes::after { content: ''; display: block; height: 45svh; }
  html.js .chapitres .chapitre__texte { position: static; top: auto; translate: none; pointer-events: auto; }
  html.js .chapitres .chapitre__texte[data-efface]:not(:focus-within) { pointer-events: none; }
  /* Le chapitre dont le texte se lit passe au-dessus de celui qui monte, encore invisible. */
  html.js .chapitres .chapitre { z-index: 1; }
  html.js .chapitres .chapitre:has(> .chapitre__texte[data-efface]:not(:focus-within)) { z-index: 0; }
}
/* Tarifs, a savoir : les regles et les deux paragraphes a la taille du texte courant (ils etaient en petit). */
@media (min-width: 840px) { #conditions .points li:not(:first-child), #conditions .section__corps > p { font-size: var(--t-corps); } }

/* --- Recette 41 (23/10/2026) ------------------------------------------------------------------------------------- */
/* Les cours en bref (Familles, Cours) : plus de pastilles qui ressemblent a des boutons (trois jures). La premiere
   ligne du cours se lit en phrase, les autres en liste a puces d'arche, alignees en haut, sur deux colonnes au bureau ;
   les mots ne changent pas. */
.fiches-bloc .fiche__lignes li:nth-child(n+3),
.fiches-bloc .fiche__lignes li:nth-child(n+3):not(.fiche__court),
.fiches-bloc .fiche__lignes li.fiche__court { justify-self: stretch; padding: 0 0 0 1.4em; border-radius: 0; background: none; font-weight: 500; }
.fiches-bloc .fiche__lignes li:nth-child(n+3)::before,
.fiches-bloc .fiche__lignes li:nth-child(n+3):not(.fiche__court)::before,
.fiches-bloc .fiche__lignes li.fiche__court::before { content: ''; inset-inline-start: 0; top: .5em; opacity: .55; }
.fiches-bloc .fiche__lignes li:nth-child(3):not(.fiche__court) { padding-inline-start: 0; font-family: var(--police-titre); font-size: var(--t-moyen); font-weight: 600; line-height: 1.25; max-width: 34ch; }
.fiches-bloc .fiche__lignes li:nth-child(3):not(.fiche__court)::before { content: none; }
@media (min-width: 840px) {
  .fiches-bloc .fiche__lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-10); row-gap: var(--e-5); align-items: start; }
  .fiches-bloc .fiche__lignes li:nth-child(n+3) { grid-column: auto; grid-row: auto; max-width: 52ch; }
  .fiches-bloc .fiche__lignes li:nth-child(3):not(.fiche__court) { grid-column: 1 / -1; margin-bottom: var(--e-3); }
}

/* Pied de page au bureau : moins haut (trois jures). Les memes rangees, serrees ; la societe, ses deux pages Facebook
   et le credit sur une seule ligne qui peut passer a la suivante. */
@media (min-width: 1100px) {
  .site-footer { padding-top: var(--e-10); padding-bottom: var(--e-6); }
  .site-footer__inner { row-gap: var(--e-4); }
  .site-footer .site-footer__inner a { min-height: 32px; }
  .pied-legal { gap: var(--e-1); }
  .site-footer .pied-societe { column-gap: var(--e-5); }
  .site-footer .pied-societe a { min-height: 28px; }
}
/* Au bureau, la langue et le credit rejoignent la ligne des deux pages Facebook (une rangee de moins) ; ailleurs, le
   credit reste sous les volets, toujours visible. Un seul des deux est affiche, et donc lu. */
.pied-credit { display: none; }
@media (min-width: 1100px) {
  .site-footer .pied-societe .pied-credit { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
  .site-footer .pied-societe .pied-credit span { white-space: nowrap; }
  .site-footer .pied-societe .pied-credit span::after { content: none; }
  .site-footer .site-footer__inner .footer-bottom { display: none; }
}
/* Liens fleches : un trait discret, toujours visible, pour qu'ils se lisent comme des liens ; il se renforce au survol. */
.lien-fleche > span::after { transform: scaleX(1); opacity: .35; transition: opacity var(--mv-micro) var(--mv-entree); }
.lien-fleche:hover > span::after, .lien-fleche:focus-visible > span::after { opacity: 1; }
.contact-ligne .lien-fleche > span::after { bottom: -4px; }
/* Accueil, sous les deux prix : les quatre engagements communs en liste a puces d'arche, et non en tuiles pleines qui
   ressemblaient a des boutons (deux jures, recette 41). Les mots ne changent pas. */
.deux-champs__communs li { display: block; padding: 0 0 0 1.4em; border-radius: 0; background: none; font-weight: 500; }
.deux-champs__communs li::before { content: ''; position: absolute; inset-inline-start: 0; top: .5em; width: .6em; height: .75em; border-radius: var(--arche); background: currentColor; opacity: .55; }
/* Titres de section un cran plus grands au bureau : 64 px contre 20 px de texte (trois fois et plus), et non 56. */
@media (min-width: 1100px) { :root { --t-titre: clamp(28px, 4.45vw, 64px); } }
/* A cote d'une image, la colonne est etroite : ces titres gardent 56 px (deux lignes au plus). */
@media (min-width: 1100px) { .section--figure .section__texte h2 { font-size: clamp(28px, 3.9vw, 56px); } }
/* Accueil, chapitres : le texte a la taille du texte courant (21 px) sous des titres de 66 px, soit plus de trois fois,
   et non 28 px (2,4 fois) ; deux jures, recette 42. */
@media (min-width: 840px) {
  .chapitre h2 + p, .chapitre p + p { font-size: var(--t-corps); line-height: 1.5; }
  .chapitre h2 + p { font-weight: 500; }
}
/* Recette 43 : moins de partages image et texte sur l'accueil (trois jures). « Un horaire fixe » devient une phrase
   centree au-dessus des trois etapes ; les questions des familles passent sous leur titre, sur toute la largeur ; l'introduction et ses liens sur une ligne. */
@media (min-width: 1100px) {
  .pousse .pousse__entete { display: block; text-align: center; }
  .pousse .pousse__entete h2 { max-width: 20ch; margin-inline: auto; }
  .pousse .pousse__corps { max-width: 56ch; margin: var(--e-6) auto 0; }
  .pousse .pousse__corps p { margin-inline: auto; }
  .pousse .pousse__corps .section-links { justify-content: center; }
  .faq-ouverte .faq-ouverte__tete { grid-column: 1 / -1; position: static; display: block; }
  .faq-ouverte .faq-ouverte__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-8); margin-top: var(--e-4); }
  .faq-ouverte .faq-ouverte__intro > p { margin-top: 0; }
  .faq-ouverte .faq-ouverte__intro .liste-liens { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); }
  .faq-ouverte .faq-ouverte__liste { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-3); }
}
/* Pied de page : les quatre adresses vivent sur la page Contact ; un lien « Nous contacter » sur chaque page
   (directeur, 23/10/2026). Au bureau, en tete des liens legaux, a 16 px pour tenir sur une ligne. */
.pied-contact--bureau { display: none; }
@media (min-width: 1100px) {
  .pied-contact--telephone { display: none; }
  .pied-contact--bureau { display: list-item; }
  .site-footer .footer-legal a { font-size: 16px; }
  .pied-contact--bureau a { font-weight: 600; }
}
/* Pages interieures (directeur, 23/10/2026, d'apres les jures) : moins de partages image et texte. « Trois seances par
   semaine » (Cours) et « Ce que nous enseignons » (Academie) deviennent une phrase centree, l'image dessous, comme
   « Un horaire fixe » sur l'accueil. Les mots et les images ne changent pas. */
@media (min-width: 840px) {
  .page-cours :is(#groupes, #methode).section--pleine, .page-academie :is(#projet, #famille).section--pleine { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: var(--e-8); }
  .page-cours :is(#groupes, #methode).section--pleine > *, .page-academie :is(#projet, #famille).section--pleine > * { grid-column: 1; grid-row: auto; align-self: auto; }
  .page-cours :is(#groupes, #methode).section--pleine .pleine__tete h2, .page-academie :is(#projet, #famille).section--pleine .pleine__tete h2 { max-width: 20ch; margin-inline: auto; }
  .page-cours :is(#groupes, #methode).section--pleine .pleine__corps, .page-academie :is(#projet, #famille).section--pleine .pleine__corps { display: block; max-width: 60ch; margin-inline: auto; }
  .page-cours :is(#groupes, #methode).section--pleine .pleine__texte, .page-academie :is(#projet, #famille).section--pleine .pleine__texte { columns: auto; }
  .page-cours :is(#groupes, #methode).section--pleine .pleine__texte p, .page-academie :is(#projet, #famille).section--pleine .pleine__texte p { margin-inline: auto; }
  .page-cours :is(#groupes, #methode).section--pleine .section-links, .page-academie :is(#projet, #famille).section--pleine .section-links { justify-content: center; }
  .page-cours :is(#groupes, #methode).section--pleine .pleine__image, .page-academie :is(#projet, #famille).section--pleine .pleine__image { order: 3; width: 100%; }
}