/* =========================================================================
   Centre RAWAJ : feuille de style du site public
   - Mobile-first : styles de base pour petit écran, puis @media (min-width)
   - Propriétés LOGIQUES uniquement (inline / block) : le passage en arabe (RTL)
     retourne la mise en page sans réécrire le CSS
   - Mesures reprises de bdeb.qc.ca (voir ref/design/ANALYSE-BDEB.md)
   ========================================================================= */


/* ---------- 1. Police (auto-hébergée, licence OFL) ---------------------- */

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
    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: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    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;
}


/* Cairo : police des pages en arabe (licence OFL), même famille de graisses (200 à 1000) */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/cairo-latin.woff2') format('woff2');
    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;
}


/* ---------- 2. Variables ------------------------------------------------ */

:root {
    /* Couleurs BdeB (le jaune devient l'orange RAWAJ) */
    --noir: #080913;
    --blanc: #ffffff;
    --gris-fond: #f2f2f2;
    --gris-bouton: #2a2a2a;
    --gris-bouton-survol: #3d3d3d;

    --accent: #f26b1d;          /* orange RAWAJ (remplace le jaune BdeB) */
    --accent-survol: #d9560f;
    --accent-texte: #b5440a;    /* orange en texte sur fond clair (contraste AA) */
    --rouge: #d7262b;           /* bandeau « Portes ouvertes » */
    --whatsapp: #25d366;
    --whatsapp-survol: #1ebe5a;

    /* Accents secondaires, palette « Souk » (cartes, chiffres, pastilles, icônes).
       Toujours avec du texte noir : contraste de 5,8:1 à 11,3:1. */
    --grenade: #ff5a6e;         /* rouge grenade */
    --majorelle: #7b7cff;       /* bleu Majorelle, éclairci pour rester lisible avec du texte noir */
    --menthe: #2ec4a0;          /* thé à la menthe */
    --safran: #ffb627;          /* safran */
    --lavande: #a396f1;
    --bleu: #2660b7;

    --filet-sombre: rgba(255, 255, 255, .1);
    --filet-clair: rgba(8, 9, 19, .1);
    --attenue-sombre: rgba(255, 255, 255, .7);
    --attenue-clair: rgba(8, 9, 19, .7);

    --police: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Mise en page */
    --lateral: 0px;             /* largeur de la barre latérale (0 sur mobile) */
    --conteneur: 1140px;
    --gouttiere: 16px;
    --espace-section: 60px;
    --rayon-petit: 10px;
    --rayon-grand: 20px;

    --transition: .25s ease;
    --transition-lente: .5s ease;

    /* Sens de lecture pour les translations (1 = gauche→droite, -1 = arabe) */
    --sens: 1;
}

[dir="rtl"] {
    --sens: -1;
}

/* Pages en arabe : police Cairo */
[lang="ar"] {
    --police: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Couleurs selon le thème (attribut data-theme sur <html>) :
   - contenu : --fond, --texte, --carte…
   - menus et pied de page : --menu-…
   La modale « Créneaux » et le bandeau rouge restent toujours sombres. */
:root,
[data-theme="sombre"] {
    --fond: var(--noir);
    --texte: var(--blanc);
    --texte-attenue: var(--attenue-sombre);
    --filet: var(--filet-sombre);
    --carte: #15161f;           /* cartes des pages intérieures en mode sombre */
    --carte-fond-doux: rgba(255, 255, 255, .08); /* badges, champs */
    --accent-lien: var(--accent); /* orange lisible sur fond sombre */
    --champ-fond: #0d0e18;      /* champs de formulaire */
    --champ-bord: rgba(255, 255, 255, .45); /* bordure visible (contraste 3:1) */
    --erreur: #ff7a7d;          /* rouge lisible sur fond sombre */
    --menu-fond: var(--noir);
    --menu-texte: var(--blanc);
    --menu-attenue: var(--attenue-sombre);
    --menu-filet: var(--filet-sombre);
    --menu-survol: rgba(255, 255, 255, .06);
    --menu-rond-survol: rgba(255, 255, 255, .2);
    --menu-actif: var(--accent);
    /* Texte posé sur l'orange (mots surlignés) et boutons WhatsApp : noir en mode sombre */
    --surligne-texte: var(--noir);
    --whatsapp-fond: var(--whatsapp);
    --whatsapp-fond-survol: var(--whatsapp-survol);
    --whatsapp-texte: var(--noir);
    color-scheme: dark;
}

[data-theme="clair"] {
    --fond: var(--gris-fond);
    --texte: var(--noir);
    --texte-attenue: var(--attenue-clair);
    --filet: var(--filet-clair);
    --carte: var(--blanc);
    --carte-fond-doux: var(--gris-fond);
    --accent-lien: var(--accent-texte); /* orange foncé : contraste AA sur fond clair */
    --champ-fond: var(--blanc);
    --champ-bord: rgba(8, 9, 19, .5);
    --erreur: #b3141a;
    --menu-fond: var(--blanc);
    --menu-texte: var(--noir);
    --menu-attenue: var(--attenue-clair);
    --menu-filet: var(--filet-clair);
    --menu-survol: rgba(8, 9, 19, .05);
    --menu-rond-survol: rgba(8, 9, 19, .16);
    /* Mode clair : texte blanc sur l'orange et sur WhatsApp (demande du client).
       Le blanc sur le vert WhatsApp #25d366 ne donne que 2:1 (illisible) :
       en mode clair, le vert est plus profond (#15803d, 5:1 avec le blanc). */
    --surligne-texte: var(--blanc);
    --whatsapp-fond: #15803d;
    --whatsapp-fond-survol: #126b33;
    --whatsapp-texte: var(--blanc);
    --menu-actif: var(--accent-texte); /* orange foncé lisible sur blanc */
    color-scheme: light;
}

@media (min-width: 992px) {
    :root {
        --lateral: 260px;
        --gouttiere: 15px;
        --espace-section: 115px;
    }
}

@media (min-width: 1251px) {
    :root {
        --lateral: 300px;
    }
}


/* ---------- 3. Base ----------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--fond);
    color: var(--texte);
    transition: background-color var(--transition-lente), color var(--transition-lente);
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, p {
    margin: 0;
}

address {
    font-style: normal;
}

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

main:focus {
    outline: none;
}

.lien-evitement {
    position: absolute;
    inset-inline-start: 16px;
    inset-block-start: -100px;
    z-index: 100;
    padding: 12px 20px;
    border-radius: var(--rayon-petit);
    background: var(--accent);
    color: var(--noir);
    font-weight: 700;
    text-decoration: none;
}

.lien-evitement:focus {
    inset-block-start: 16px;
}

.menu-ouvert {
    overflow: hidden;
}

@media (min-width: 992px) {
    body {
        font-size: 18px;
    }
}


/* ---------- 4. Icônes ----------------------------------------------------- */

.icone {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Flèches et chevrons : retournés automatiquement en arabe */
.icone--sens {
    transform: scaleX(var(--sens));
}


/* ---------- 5. Typographie -------------------------------------------- */

.surtitre {
    margin-block-end: 8px;
    font-size: 15px;
    font-weight: 500;
    opacity: .7;
}

.titre-section {
    margin-block-end: 30px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
}

/* Mot surligné dans un titre (« futur », « nombreuses » chez BdeB) */
.surligne {
    padding-inline: .15em;
    border-radius: 8px;
    background: var(--accent);
    color: var(--surligne-texte);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.surtitre-mini {
    margin-block-end: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--attenue-sombre);
}

.texte-intro {
    font-size: 18px;
    line-height: 1.5;
}

.texte-intro {
    color: var(--texte-attenue);
}

.trait-accent {
    display: block;
    width: 40px;
    height: 4px;
    margin-block-end: 20px;
    background: var(--accent);
}

@media (min-width: 992px) {
    .surtitre {
        font-size: 20px;
    }

    .titre-section {
        font-size: 48px;
    }

    .texte-intro {
        font-size: 24px;
    }
}


/* ---------- 6. Conteneur ------------------------------------------------ */

.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}


/* ---------- 7. Boutons ------------------------------------------------ */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 20px;
    border-radius: var(--rayon-petit);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.bouton .icone {
    width: 20px;
    height: 20px;
}

.bouton--accent {
    background: var(--accent);
    color: var(--noir);
}

.bouton--accent:hover {
    background: var(--accent-survol);
}

/* WhatsApp : texte noir sur le vert en mode sombre, texte blanc sur un vert plus profond en mode clair */
.bouton--whatsapp {
    background: var(--whatsapp-fond);
    color: var(--whatsapp-texte);
}

.bouton--whatsapp:hover {
    background: var(--whatsapp-fond-survol);
}

.bouton--sombre {
    background: var(--gris-bouton);
    color: var(--blanc);
}

.bouton--sombre:hover {
    background: var(--gris-bouton-survol);
}

.bouton--pilule {
    border-radius: 24px;
}

.bouton--large {
    width: 100%;
}

.bouton-rond {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--filet-sombre);
    color: var(--blanc);
    transition: background-color var(--transition);
}

.bouton-rond:hover {
    background: rgba(255, 255, 255, .2);
}

.bouton-rond .icone {
    width: 22px;
    height: 22px;
}


/* ---------- 8. Structure : zone de contenu à côté de la barre latérale --- */

.page {
    padding-inline-start: var(--lateral);
    transition: padding var(--transition-lente);
}


/* ---------- 9. Bandeau rouge « Portes ouvertes » ----------------------- */

.bandeau {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding-block: 8px;
    padding-inline: 52px;
    background: var(--rouge);
    color: var(--blanc);
    text-align: center;
}

.bandeau__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.bandeau__lien:hover {
    text-decoration: underline;
}

.bandeau__lien .icone {
    width: 14px;
    height: 14px;
}

.bandeau__fermer {
    position: absolute;
    inset-inline-end: 2px;
    inset-block-start: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
}

.bandeau__fermer .icone {
    width: 20px;
    height: 20px;
}

.sans-bandeau .bandeau {
    display: none;
}

@media (min-width: 992px) {
    .bandeau__lien {
        font-size: 18px;
    }
}


/* ---------- 10. En-tête mobile (< 992 px) ------------------------------ */

.entete-mobile {
    display: grid;
    /* burger | logo centré | interrupteur + téléphone */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 74px;
    padding-inline: 6px;
    border-block-end: 1px solid var(--menu-filet);
    background: var(--menu-fond);
    color: var(--menu-texte);
    transition: background-color var(--transition-lente), color var(--transition-lente);
}

.entete-mobile__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding-inline: 8px;
}

/* Largeur écrite en dur : Safari (iPhone) n'étire pas les éléments dans un <button>,
   sans elle les 3 traits faisaient 0 px de large (burger invisible) */
.entete-mobile__burger span {
    display: block;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
}

.entete-mobile__logo {
    justify-self: center;
}

.entete-mobile__droite {
    display: flex;
    align-items: center;
    justify-self: end;
}

.entete-mobile__logo img {
    width: auto;
    height: 64px;
}

/* Bascule FR ↔ AR : simple texte, sans entourage (haut du menu burger, barre du haut) */
.bascule-langue {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Police du système pour ces quelques lettres : évite de télécharger la police
   de l'autre langue (≈ 30 Ko) juste pour ce bouton */
.bascule-langue {
    font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

.bascule-langue[lang="ar"] {
    font-size: 15px;
}

.pied__bas-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.entete-mobile__tel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--menu-actif);
}

.entete-mobile__tel .icone {
    width: 24px;
    height: 24px;
}

@media (min-width: 992px) {
    .entete-mobile {
        display: none;
    }
}


/* ---------- 11. Menu mobile plein écran ---------------------------------- */

.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    background: var(--menu-fond);
    color: var(--menu-texte);
    opacity: 0;
    transition: opacity var(--transition);
}

.menu-mobile.est-ouvert {
    opacity: 1;
}

.menu-mobile__panneau {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 20px 24px;
    background: var(--menu-fond);
    transition: transform var(--transition-lente), visibility var(--transition-lente);
}

/* Boutons ronds (fermer, retour) et petits titres : couleurs du thème du menu */
.menu-mobile .bouton-rond {
    background: var(--menu-filet);
    color: var(--menu-texte);
}

.menu-mobile .bouton-rond:hover {
    background: var(--menu-rond-survol);
}

.menu-mobile .surtitre-mini,
.laterale .surtitre-mini {
    color: var(--menu-attenue);
}

/* Sous-menu : panneau qui glisse depuis le côté (en profondeur) */
.menu-mobile__panneau--sous {
    visibility: hidden;
    transform: translateX(calc(100% * var(--sens)));
}

.menu-mobile__panneau--sous.est-actif {
    visibility: visible;
    transform: translateX(0);
}

.menu-mobile__haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 20px;
}

.menu-mobile__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Langue dans le menu burger : zone tactile de 48 px */
.menu-mobile__actions .bascule-langue {
    min-height: 48px;
    font-size: 16px;
}

.menu-mobile__logo img {
    width: auto;
    height: 60px;
}

.menu-mobile__bas {
    margin-block-start: auto;
    margin-inline: -20px;
    padding: 20px 20px 0;
    border-block-start: 1px solid var(--menu-filet);
}

.menu-mobile__bas .bouton {
    margin-block-start: 12px;
}

/* Tuiles (entrées du menu mobile) */
.tuiles {
    display: grid;
    gap: 8px;
}

.tuiles + .tuiles {
    margin-block-start: 8px;
}

nav .tuiles:last-child {
    margin-block-end: 20px;
}

.tuiles--2 {
    grid-template-columns: 1fr 1fr;
}

.tuiles--reseaux {
    grid-template-columns: repeat(3, 1fr);
}

.tuile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 15px;
    border: 1px solid var(--menu-filet);
    border-radius: var(--rayon-petit);
    color: var(--menu-texte);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    text-decoration: none;
    transition: background-color var(--transition-lente), border-color var(--transition-lente);
}

.tuile:hover,
.tuile:active {
    background: var(--menu-survol);
}

.tuile[aria-current="page"] {
    border-color: var(--accent);
}

.tuile .icone {
    width: 18px;
    height: 18px;
    opacity: .7;
}

.tuile--petite {
    min-height: 48px;
    font-size: 14px;
}

.tuile--carree {
    justify-content: center;
}

.tuile--carree .icone {
    width: 22px;
    height: 22px;
    opacity: 1;
}

.tuile--tous {
    font-weight: 400;
    color: var(--menu-attenue);
}

@media (min-width: 992px) {
    .menu-mobile {
        display: none !important;
    }
}


/* ---------- 12. Barre latérale (ordinateur ≥ 992 px) ------------------ */

.laterale {
    display: none;
}

@media (min-width: 992px) {
    .laterale {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        width: var(--lateral);
        padding: 40px 30px;
        overflow-y: auto;
        border-inline-end: 1px solid var(--menu-filet);
        background: var(--menu-fond);
        color: var(--menu-texte);
        scrollbar-width: none;
        transition: background-color var(--transition-lente), color var(--transition-lente);
    }

    .laterale__logo {
        display: block;
        flex-shrink: 0;
        margin-block-end: 48px;
    }

    .laterale__logo img {
        width: auto;
        height: 96px;
    }

    /* Menu principal */
    .nav-principale__item {
        position: relative;
    }

    .nav-principale__item + .nav-principale__item {
        margin-block-start: 14px;
    }

    .nav-principale__lien {
        position: relative;
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        transition: opacity var(--transition);
    }

    /* Trait orange sous l'entrée survolée ou active */
    .nav-principale__lien::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: -5px;
        width: 25px;
        height: 4px;
        background: var(--accent);
        opacity: 0;
        transition: opacity var(--transition-lente);
    }

    .nav-principale__lien:hover {
        opacity: .7;
    }

    .nav-principale__lien:hover::after,
    .nav-principale__lien.est-actif::after,
    .nav-principale__lien[aria-expanded="true"]::after {
        opacity: 1;
    }

    /* Panneau du sous-menu : s'ouvre à côté de la barre latérale */
    .sous-menu {
        position: fixed;
        inset-block: 0;
        inset-inline-start: var(--lateral);
        width: 300px;
        padding: 158px 40px 40px;
        border-inline-end: 1px solid var(--menu-filet);
        background: var(--menu-fond);
        opacity: 0;
        visibility: hidden;
        transform: translateX(calc(-20px * var(--sens)));
        transition: opacity var(--transition-lente), transform var(--transition-lente), visibility var(--transition-lente);
    }

    .sous-menu li + li {
        margin-block-start: 8px;
    }

    .sous-menu a {
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        transition: opacity var(--transition);
    }

    .sous-menu a:hover {
        opacity: .7;
    }

    .sous-menu a[aria-current="page"] {
        color: var(--menu-actif);
    }

    .sous-menu__tous a {
        font-weight: 400;
        color: var(--menu-attenue);
    }

    /* Ouverture : au clic / clavier (classe ajoutée par main.js)… */
    .a-sous-menu.est-ouvert .sous-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* … et au survol de la souris */
    @media (hover: hover) {
        .a-sous-menu:hover .sous-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        /* Pont invisible entre l'entrée et le panneau (la souris ne « tombe » pas dans le vide) */
        .a-sous-menu:hover::after {
            content: "";
            position: absolute;
            inset-block: -10px;
            inset-inline-start: 100%;
            width: 60px;
        }
    }

    /* Menu secondaire */
    .nav-secondaire {
        margin-block-start: 30px;
    }

    .nav-secondaire li + li {
        margin-block-start: 6px;
    }

    .nav-secondaire a {
        font-size: 12px;
        color: var(--menu-attenue);
        text-decoration: none;
        transition: color var(--transition);
    }

    .nav-secondaire a:hover,
    .nav-secondaire a[aria-current="page"] {
        color: var(--menu-texte);
    }

    /* Bas de la barre : liens utiles, bouton, réseaux */
    .laterale__bas {
        margin-block-start: auto;
        padding-block-start: 30px;
    }

    .nav-utiles a,
    .nav-utiles button {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        transition: opacity var(--transition);
    }

    .nav-utiles a:hover,
    .nav-utiles button:hover {
        opacity: .7;
    }

    .laterale__inscription {
        width: 100%;
        margin-block-start: 24px;
        font-size: 19px;
    }

    .laterale__reseaux {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-block-start: 20px;
    }

    .laterale__reseaux .surtitre-mini {
        max-width: 110px;
        margin: 0;
        font-size: 8px;
        line-height: 1.3;
    }
}

@media (min-width: 1251px) {
    .laterale {
        padding: 40px;
    }
}

@media (min-width: 992px) and (max-height: 800px) {
    .laterale {
        padding-block: 30px;
    }

    .laterale__logo {
        margin-block-end: 32px;
    }

    .sous-menu {
        padding-block-start: 132px;
    }
}

/* Voile sombre sur la page quand un sous-menu est ouvert */
.voile {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(8, 9, 19, .7);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-lente), visibility var(--transition-lente);
}

@media (min-width: 992px) {
    body:has(.a-sous-menu.est-ouvert) .voile {
        opacity: 1;
        visibility: visible;
    }

    @media (hover: hover) {
        body:has(.a-sous-menu:hover) .voile {
            opacity: 1;
            visibility: visible;
        }
    }
}

/* Petites icônes rondes des réseaux */
.reseaux-ronds {
    display: flex;
    gap: 6px;
}

.reseaux-ronds a {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--menu-texte);
    color: var(--menu-fond);
    transition: opacity var(--transition);
}

.reseaux-ronds a:hover {
    opacity: .7;
}

.reseaux-ronds .icone {
    width: 13px;
    height: 13px;
}

.reseaux-ronds--accent {
    gap: 10px;
}

.reseaux-ronds--accent a {
    width: 40px;
    height: 40px;
    background: var(--accent);
}

.reseaux-ronds--accent .icone {
    width: 20px;
    height: 20px;
}


/* Les deux versions du logo sont dans la page ; le thème choisit laquelle afficher */
[data-theme="sombre"] .logo--sur-clair,
[data-theme="clair"] .logo--sur-sombre {
    display: none;
}


/* ---------- 13. Barre de liens en haut (ordinateur) -------------------- */

.barre-haut {
    display: none;
}

@media (min-width: 992px) {
    .barre-haut {
        display: flex;
        justify-content: flex-end;
        height: 40px;
        border-block-end: 1px solid var(--filet);
    }

    

    .barre-haut__nav ul {
        display: flex;
        align-items: center;
        gap: 20px;
        height: 100%;
        padding-inline: 20px;
    }

    .barre-haut__nav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        text-decoration: none;
        transition: opacity var(--transition);
    }

    .barre-haut__nav a:hover {
        opacity: .7;
    }

    .barre-haut__whatsapp {
        color: var(--whatsapp);
    }

    .barre-haut__whatsapp .icone {
        width: 16px;
        height: 16px;
    }

    .barre-haut__theme {
        display: flex;
        align-items: center;
        padding-inline: 6px;
        border-inline-start: 1px solid var(--filet);
    }

    .barre-haut__tel {
        display: grid;
        place-items: center;
        width: 48px;
        border-inline-start: 1px solid var(--filet);
        transition: opacity var(--transition);
    }

    .barre-haut__tel:hover {
        opacity: .7;
    }

    .barre-haut__tel .icone {
        width: 16px;
        height: 16px;
    }
}


/* ---------- 14. Pied de page (couleurs des menus : clair ou sombre) ------ */

.pied {
    margin-block-start: var(--espace-section);
    border-block-start: 1px solid var(--menu-filet);
    background: var(--menu-fond);
    color: var(--menu-texte);
    font-size: 14px;
    transition: background-color var(--transition-lente), color var(--transition-lente);
}

.pied .surtitre-mini {
    color: var(--menu-attenue);
}

.pied__grille {
    max-width: var(--conteneur);
    margin-inline: auto;
}

.pied__zone {
    padding: 40px var(--gouttiere);
}

.pied__zone + .pied__zone {
    border-block-start: 1px solid var(--menu-filet);
}

.pied__logo img {
    width: auto;
    height: 90px;
}

.pied__titre {
    margin-block: 24px 10px;
    font-size: 15px;
    font-weight: 700;
}

.pied__bloc .pied__titre {
    margin-block-start: 0;
}

.pied__centre {
    margin-block-end: 14px;
    line-height: 1.5;
}

.pied a {
    text-underline-offset: 3px;
    transition: opacity var(--transition);
}

.pied a:hover {
    opacity: .7;
}

.pied__contact {
    line-height: 1.8;
}

.pied__partenaire {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 20px;
    font-size: 12px;
    color: var(--menu-attenue);
}

.pied__zone--liens .surtitre-mini:not(:first-child) {
    margin-block-start: 24px;
}

.pied__liens a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* zone tactile confortable sur mobile */
    text-decoration: none;
}

@media (min-width: 992px) {
    .pied__liens a {
        min-height: 0;
        padding-block: 4px;
    }
}

.pied__bloc {
    padding-block: 24px;
}

.pied__bloc:first-child {
    padding-block-start: 0;
}

.pied__bloc + .pied__bloc {
    border-block-start: 1px solid var(--menu-filet);
}

.pied__texte {
    margin-block-end: 16px;
    color: var(--menu-attenue);
}

.pied__bloc .bouton {
    text-decoration: none;
}

.pied__bloc--reseaux {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pied__bloc--reseaux .pied__titre {
    max-width: 160px;
    margin: 0;
}

/* Interrupteur clair / sombre : dans le pied de page sur mobile seulement
   (sur ordinateur, il est dans la barre du haut) */
.pied__bloc--theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pied__bloc--theme .pied__titre {
    margin: 0;
}

@media (min-width: 992px) {
    .pied__bloc--theme {
        display: none;
    }
}

.pied__raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pied__raccourcis .bouton {
    font-size: 14px;
}

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    max-width: var(--conteneur);
    margin-inline: auto;
    /* Espace en bas : le bouton WhatsApp flottant ne cache pas le texte */
    padding: 20px var(--gouttiere) 96px;
    border-block-start: 1px solid var(--menu-filet);
    font-size: 12px;
    color: var(--menu-attenue);
}

.pied__bas a {
    text-decoration: none;
}

/* Éléments du pied de page réservés au mobile */
.pied__actions,
.pied__centre-actions {
    display: none;
}

/* Mobile : pied de page en cartes, comme dans une application
   (actions rapides en tuiles, une carte par centre ; pas de listes de liens) */
@media (max-width: 767px) {
    .pied {
        font-size: 16px;
    }

    .pied__zone {
        padding: 28px var(--gouttiere) 8px;
    }

    .pied__zone + .pied__zone {
        border-block-start: 0;
    }

    .pied__logo {
        display: flex;
        justify-content: center;
    }

    .pied__logo img {
        height: 72px;
    }

    /* Actions rapides : 3 tuiles avec une icône ronde */
    .pied__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-block-start: 24px;
    }

    .pied__actions a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 6px;
        border-radius: 16px;
        background: var(--menu-survol);
        font-weight: 700;
        text-decoration: none;
    }

    .pied__action-icone {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        color: var(--noir);
    }

    .pied__action-icone--whatsapp {
        background: #15803d;
        color: var(--blanc);
    }

    .pied__action-icone .icone {
        width: 22px;
        height: 22px;
    }

    /* Une carte par centre, avec « Appeler » et « Itinéraire » */
    .pied__centre {
        margin-block-end: 10px;
        padding: 16px;
        border-radius: 16px;
        background: var(--menu-survol);
    }

    .pied__centre-actions {
        display: flex;
        gap: 8px;
        margin-block-start: 12px;
    }

    .pied__centre-actions a {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        border: 1px solid var(--menu-filet);
        border-radius: 22px;
        background: var(--menu-fond);
        font-weight: 700;
        text-decoration: none;
    }

    .pied__centre-actions .icone {
        width: 18px;
        height: 18px;
        color: var(--accent);
    }

    /* WhatsApp et e-mail : déjà dans les actions rapides */
    .pied__contact,
    .pied__bloc--whatsapp {
        display: none;
    }

    /* Listes « Le centre » et « Formations » : masquées sur mobile
       (déjà dans le menu burger et dans les cartes de l'accueil) */
    .pied__zone--liens {
        display: none;
    }

    /* Réseaux, mode clair / sombre, raccourcis : une carte chacun */
    .pied__zone--blocs {
        padding-block-start: 20px;
    }

    .pied__bloc,
    .pied__bloc:first-child {
        margin-block-end: 10px;
        padding: 16px;
        border-radius: 16px;
        background: var(--menu-survol);
    }

    .pied__bloc + .pied__bloc {
        border-block-start: 0;
    }

    .pied__raccourcis .bouton {
        flex: 1;
    }

    .pied__partenaire {
        justify-content: center;
        text-align: center;
    }

    .pied__bas {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .pied__grille {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pied__zone + .pied__zone {
        border-block-start: 0;
    }

    .pied__zone--blocs {
        grid-column: 1 / -1;
        border-block-start: 1px solid var(--menu-filet) !important;
    }
}

@media (min-width: 992px) {
    .pied__grille {
        grid-template-columns: 1fr .8fr 1.2fr;
    }

    .pied__zone {
        padding: 50px 30px 40px;
    }

    .pied__zone:first-child {
        padding-inline-start: var(--gouttiere);
    }

    .pied__zone + .pied__zone {
        border-inline-start: 1px solid var(--menu-filet);
    }

    .pied__zone--blocs {
        grid-column: auto;
        border-block-start: 0 !important;
        padding-inline-end: var(--gouttiere);
    }

    .pied__bas {
        padding-block-end: 24px;
    }
}


/* ---------- 15. Modale « Créneaux » ------------------------------------- */

.modale {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--noir);
    color: var(--blanc);
}

.modale[open] {
    animation: apparition var(--transition-lente);
}

.modale::backdrop {
    background: rgba(8, 9, 19, .7);
}

.modale__contenu {
    position: relative;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding: 90px var(--gouttiere) 48px;
}

.modale__fermer {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: var(--gouttiere);
}

.modale__intro {
    max-width: 640px;
    color: var(--attenue-sombre);
}

.creneaux {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-block: 30px;
}

.creneau {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    padding: 20px;
    border-radius: var(--rayon-petit);
    color: var(--noir);
}

.creneau .icone {
    width: 28px;
    height: 28px;
    margin-block-end: auto;
}

.creneau strong {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.15;
}

.creneau span {
    font-size: 14px;
}

.fond-grenade { background: var(--grenade); }
.fond-majorelle { background: var(--majorelle); }
.fond-menthe { background: var(--menthe); }
.fond-safran { background: var(--safran); }
.fond-lavande { background: var(--lavande); }

@media (min-width: 768px) {
    .creneaux {
        grid-template-columns: repeat(4, 1fr);
    }

    .creneau {
        min-height: 220px;
    }

    .creneau strong {
        font-size: 26px;
    }
}

@media (min-width: 992px) {
    /* Comme BdeB : la modale couvre la zone de contenu, pas la barre latérale */
    .modale {
        margin-inline-start: var(--lateral);
        width: calc(100% - var(--lateral));
    }

    .modale__contenu {
        padding-block-start: 120px;
    }
}

@keyframes apparition {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ---------- 16. Bouton WhatsApp flottant -------------------------------- */

.whatsapp-flottant {
    position: fixed;
    inset-inline-end: 16px;
    inset-block-end: 16px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whatsapp-fond);
    color: var(--whatsapp-texte);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform var(--transition), background-color var(--transition);
}

.whatsapp-flottant:hover {
    background: var(--whatsapp-fond-survol);
    transform: scale(1.06);
}

.whatsapp-flottant .icone {
    width: 32px;
    height: 32px;
}

@media (min-width: 992px) {
    .whatsapp-flottant {
        inset-inline-end: 24px;
        inset-block-end: 24px;
    }
}


/* ---------- 16 bis. Interrupteur mode clair / mode sombre ---------------- */

/* Zone tactile de 48 px autour d'une piste de 56 × 30 px */
.interrupteur {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    padding-inline: 2px;
}

.interrupteur__piste {
    position: relative;
    display: block;
    width: 56px;
    height: 30px;
    overflow: hidden;
    border-radius: 15px;
    /* Mode clair : ciel de fin d'après-midi, aux couleurs de RAWAJ */
    background: linear-gradient(135deg, #ffd29e, #ff9d5c);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
    transition: background .5s ease, box-shadow var(--transition);
}

.interrupteur:hover .interrupteur__piste {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 3px rgba(242, 107, 29, .35);
}

/* Le rond qui glisse (avec un petit rebond) et tourne sur lui-même */
.interrupteur__bouton {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--accent-texte);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    transition: transform .6s cubic-bezier(.68, -.55, .27, 1.55), background-color .5s ease, color .5s ease;
}

.interrupteur__bouton .icone {
    position: absolute;
    width: 16px;
    height: 16px;
    transition: opacity .4s ease, transform .6s ease;
}

.interrupteur__lune {
    opacity: 0;
    transform: rotate(-90deg) scale(.5);
}

/* Mode sombre : piste bleu nuit, la lune remplace le soleil */
[data-theme="sombre"] .interrupteur__piste {
    background: linear-gradient(135deg, #1b1e45, #33367a);
}

[data-theme="sombre"] .interrupteur__bouton {
    background: #f4efe1;
    color: #33367a;
    transform: translateX(calc(26px * var(--sens))) rotate(calc(360deg * var(--sens)));
}

[data-theme="sombre"] .interrupteur__soleil {
    opacity: 0;
    transform: rotate(90deg) scale(.5);
}

[data-theme="sombre"] .interrupteur__lune {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Changement de thème : le nouveau thème s'ouvre en cercle depuis l'interrupteur
   (View Transitions ; les navigateurs qui ne la connaissent pas changent simplement de couleur).
   --theme-x, --theme-y et --theme-rayon sont calculés par main.js. */
::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
    animation: revele-theme .7s ease-in-out;
}

@keyframes revele-theme {
    from {
        clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 0));
    }
    to {
        clip-path: circle(var(--theme-rayon, 150vmax) at var(--theme-x, 50%) var(--theme-y, 0));
    }
}

/* Pendant le cercle : la page change d'un coup (sauf l'interrupteur, qui garde son animation) */
.sans-transition *:not(.interrupteur, .interrupteur *),
.sans-transition body {
    transition: none !important;
}


/* ---------- 17. Pages intérieures : éléments communs --------------------- */

.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    padding-block: 16px;
    font-size: 12px;
}

.fil-ariane li + li::before {
    content: "/";
    margin-inline: 6px;
}

.fil-ariane a {
    text-decoration: none;
}

.fil-ariane a:hover {
    text-decoration: underline;
}

.fil-ariane [aria-current] {
    font-weight: 700;
}

/* Carte de contenu : blanche en mode clair, gris très foncé en mode sombre */
.carte {
    padding: 30px 20px;
    border-radius: var(--rayon-grand);
    background: var(--carte);
    color: var(--texte);
    transition: background-color var(--transition-lente);
}

.construction__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 30px;
}

@media (min-width: 992px) {
    .carte {
        padding: 60px;
    }
}


/* ---------- 18. Utilitaires ---------------------------------------------- */

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.fond-accent { background: var(--accent); }

/* « TTC » collé au prix, en petit gras */
.ttc {
    font-weight: 700;
}

/* Section de l'accueil : même espace de 115 px (60 px sur mobile) au-dessus de chacune */
.section {
    padding-block-start: var(--espace-section);
}

/* En-tête de section : titre à gauche, bouton à droite (ordinateur) */
.section__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0 30px;
    margin-block-end: 30px;
}

.section__entete .titre-section {
    margin-block-end: 20px;
}

.section__entete .bouton {
    margin-block-end: 20px;
}

/* Forme de découpe des photos : la toque du logo RAWAJ (assets/img/forme-toque.svg).
   Les navigateurs trop anciens pour les masques affichent une arche à la place. */
.forme-decoupe {
    overflow: hidden;
    border-start-start-radius: 1000px;
    border-start-end-radius: 1000px;
    border-end-start-radius: var(--rayon-grand);
    border-end-end-radius: var(--rayon-grand);
}

/* La toque est écrite directement ici (copie de assets/img/forme-toque.svg) : pas de fichier
   à télécharger avant d'afficher la première photo, qui apparaît donc tout de suite. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .forme-decoupe {
        border-radius: 0;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='25' cy='48' r='23'/%3E%3Ccircle cx='75' cy='48' r='23'/%3E%3Ccircle cx='50' cy='30' r='29'/%3E%3Crect x='14' y='44' width='72' height='35' rx='4'/%3E%3Crect x='16' y='83' width='68' height='26' rx='6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Ccircle cx='25' cy='48' r='23'/%3E%3Ccircle cx='75' cy='48' r='23'/%3E%3Ccircle cx='50' cy='30' r='29'/%3E%3Crect x='14' y='44' width='72' height='35' rx='4'/%3E%3Crect x='16' y='83' width='68' height='26' rx='6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
}


/* ---------- 19. Accueil : diaporama -------------------------------------- */

.splash {
    position: relative;
    padding-block: 24px 0;
    /* Les formes de couleur qui débordent de la photo ne créent pas de défilement horizontal */
    overflow-x: clip;
}

.splash__grille {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
}

/* Motifs de cuisine en arrière-plan, immobiles (fouet, toque, fourchette, cuillère, rouleau, cupcake, tasse).
   Le dessin est une copie de assets/img/motif-cuisine.svg, utilisé comme masque :
   sa couleur suit le thème (var(--texte)). */
.splash__fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Les motifs s'effacent en haut et en bas de la section */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
}

.splash__motif {
    position: absolute;
    inset: 0;
    background-color: var(--texte);
    opacity: .07;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 14) rotate(-20 18 18)'%3E%3Cpath d='M18 2v12M18 14c-8 6-8 18 0 20 8-2 8-14 0-20zM18 14c-4 6-4 16 0 20M18 14c4 6 4 16 0 20'/%3E%3C/g%3E%3Cg transform='translate(130 22) rotate(8 18 18)'%3E%3Cpath d='M8 22c-5 0-8-4-8-8s4-8 8-7c1-4 5-7 10-7s9 3 10 7c4-1 8 3 8 7s-3 8-8 8v10H8zM8 26h20'/%3E%3C/g%3E%3Cg transform='translate(74 92) rotate(25 18 18)'%3E%3Cpath d='M10 2v10a4 4 0 0 0 8 0V2M14 2v10M14 16v18'/%3E%3C/g%3E%3Cg transform='translate(186 104) rotate(-30 18 18)'%3E%3Cpath d='M14 2c-4 0-6 4-6 8s2 7 6 7 6-3 6-7-2-8-6-8zM14 17v17'/%3E%3C/g%3E%3Cg transform='translate(16 170) rotate(-35 18 18)'%3E%3Cpath d='M2 18h6M28 18h6'/%3E%3Crect x='8' y='13' width='20' height='10' rx='3'/%3E%3C/g%3E%3Cg transform='translate(112 168) rotate(-6 18 18)'%3E%3Cpath d='M6 18h24l-3 14H9zM6 18c0-6 5-10 12-10s12 4 12 10M18 8V4'/%3E%3C/g%3E%3Cg transform='translate(192 186) rotate(12 18 18)'%3E%3Cpath d='M4 10h22v10a8 8 0 0 1-8 8h-6a8 8 0 0 1-8-8zM26 13h3a4 4 0 0 1 0 8h-3M10 2v4M16 2v4'/%3E%3C/g%3E%3Ccircle cx='98' cy='40' r='2'/%3E%3Ccircle cx='40' cy='120' r='2'/%3E%3Ccircle cx='160' cy='140' r='2'/%3E%3Ccircle cx='214' cy='60' r='2'/%3E%3Ccircle cx='80' cy='222' r='2'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 14) rotate(-20 18 18)'%3E%3Cpath d='M18 2v12M18 14c-8 6-8 18 0 20 8-2 8-14 0-20zM18 14c-4 6-4 16 0 20M18 14c4 6 4 16 0 20'/%3E%3C/g%3E%3Cg transform='translate(130 22) rotate(8 18 18)'%3E%3Cpath d='M8 22c-5 0-8-4-8-8s4-8 8-7c1-4 5-7 10-7s9 3 10 7c4-1 8 3 8 7s-3 8-8 8v10H8zM8 26h20'/%3E%3C/g%3E%3Cg transform='translate(74 92) rotate(25 18 18)'%3E%3Cpath d='M10 2v10a4 4 0 0 0 8 0V2M14 2v10M14 16v18'/%3E%3C/g%3E%3Cg transform='translate(186 104) rotate(-30 18 18)'%3E%3Cpath d='M14 2c-4 0-6 4-6 8s2 7 6 7 6-3 6-7-2-8-6-8zM14 17v17'/%3E%3C/g%3E%3Cg transform='translate(16 170) rotate(-35 18 18)'%3E%3Cpath d='M2 18h6M28 18h6'/%3E%3Crect x='8' y='13' width='20' height='10' rx='3'/%3E%3C/g%3E%3Cg transform='translate(112 168) rotate(-6 18 18)'%3E%3Cpath d='M6 18h24l-3 14H9zM6 18c0-6 5-10 12-10s12 4 12 10M18 8V4'/%3E%3C/g%3E%3Cg transform='translate(192 186) rotate(12 18 18)'%3E%3Cpath d='M4 10h22v10a8 8 0 0 1-8 8h-6a8 8 0 0 1-8-8zM26 13h3a4 4 0 0 1 0 8h-3M10 2v4M16 2v4'/%3E%3C/g%3E%3Ccircle cx='98' cy='40' r='2'/%3E%3Ccircle cx='40' cy='120' r='2'/%3E%3Ccircle cx='160' cy='140' r='2'/%3E%3Ccircle cx='214' cy='60' r='2'/%3E%3Ccircle cx='80' cy='222' r='2'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
}

.splash__texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.splash__surtitre {
    margin-block-end: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--texte-attenue);
}

.splash__titre {
    margin-block-end: 20px;
    font-size: clamp(46px, 14vw, 80px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* Bloc orange sur sa propre ligne, puis la suite du titre en dessous */
.splash__titre .surligne {
    display: inline-block;
    padding-inline: .12em;
    border-radius: 16px;
}

.splash__titre span {
    display: block;
}

.splash__intro {
    max-width: 520px;
    margin-block-end: 28px;
    font-size: 18px;
    color: var(--texte-attenue);
}

.splash__bouton {
    width: 100%;
}

/* Photo au-dessus du texte sur mobile */
.splash__visuel {
    position: relative;
    order: -1;
    justify-self: center;
    width: 100%;
    /* Photo moyenne sur mobile : le titre reste visible sans faire défiler */
    max-width: 290px;
}

/* Objets de cuisine posés sur la photo (dessinés pour RAWAJ), chacun d'une seule couleur :
   une poêle avec un œuf (orange, cuisine) en bas et un cupcake (grenade, pâtisserie) en haut.
   Le dessin sert de masque : la couleur vient du fond (jetons de la palette). */
.splash__visuel::before,
.splash__visuel::after {
    content: "";
    position: absolute;
    z-index: 1;
}

.splash__visuel::before {
    inset-block-end: -10px;
    inset-inline-start: -16%;
    width: 42%;
    aspect-ratio: 74 / 46;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 46'%3E%3Cmask id='m'%3E%3Crect x='0' y='18' width='34' height='10' rx='5' fill='%23fff'/%3E%3Ccircle cx='51' cy='23' r='22' fill='%23fff'/%3E%3Ccircle cx='6' cy='23' r='2' fill='%23000'/%3E%3Cpath d='M38 20c0-7 7-11 13-10 5-3 13 1 13 7 4 4 1 12-5 12-3 5-12 6-15 1-6 0-9-6-6-10z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='51' cy='21' r='5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/mask%3E%3Crect width='74' height='46' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 46'%3E%3Cmask id='m'%3E%3Crect x='0' y='18' width='34' height='10' rx='5' fill='%23fff'/%3E%3Ccircle cx='51' cy='23' r='22' fill='%23fff'/%3E%3Ccircle cx='6' cy='23' r='2' fill='%23000'/%3E%3Cpath d='M38 20c0-7 7-11 13-10 5-3 13 1 13 7 4 4 1 12-5 12-3 5-12 6-15 1-6 0-9-6-6-10z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='51' cy='21' r='5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/mask%3E%3Crect width='74' height='46' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
    /* En arabe, le manche passe de l'autre côté (toujours vers l'extérieur) */
    transform: scaleX(var(--sens)) rotate(-8deg);
}

.splash__visuel::after {
    inset-block-start: 14%;
    inset-inline-end: -5%;
    width: 17%;
    aspect-ratio: 40 / 46;
    background: var(--grenade);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cmask id='m'%3E%3Ccircle cx='20' cy='6' r='4.5' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M3 23c0-9 8-14 17-14s17 5 17 14z'/%3E%3Cpath fill='%23fff' d='M6 26h28l-4 19H10z'/%3E%3Cpath stroke='%23000' stroke-width='1.8' d='M14 27l1 17M20 27v17M26 27l-1 17'/%3E%3C/mask%3E%3Crect width='40' height='46' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cmask id='m'%3E%3Ccircle cx='20' cy='6' r='4.5' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M3 23c0-9 8-14 17-14s17 5 17 14z'/%3E%3Cpath fill='%23fff' d='M6 26h28l-4 19H10z'/%3E%3Cpath stroke='%23000' stroke-width='1.8' d='M14 27l1 17M20 27v17M26 27l-1 17'/%3E%3C/mask%3E%3Crect width='40' height='46' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(12deg);
}

.splash__diapos {
    position: relative;
    aspect-ratio: 1;
    background: var(--gris-bouton);
}

/* Fondu enchaîné : toutes les photos sont superposées, une seule est visible */
.splash__diapo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.splash__diapo.est-visible {
    opacity: 1;
}

.splash__decouvrir {
    display: none;
    z-index: 1;
}

@media (min-width: 576px) {
    .splash__bouton {
        width: auto;
    }
}

@media (min-width: 992px) {
    .splash {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: min(823px, calc(100vh - 85px));
        padding-block: 60px 90px;
    }

    .splash__grille {
        grid-template-columns: 1fr 42%;
        align-items: center;
        gap: 40px;
    }

    .splash__visuel {
        order: 0;
        max-width: 460px;
    }

    .splash__diapos {
        aspect-ratio: 5 / 5.4;
    }

    .splash__surtitre {
        font-size: 24px;
    }

    /* 120 px chez BdeB : ici la taille suit la largeur pour que « pâtisserie » tienne */
    .splash__titre {
        font-size: clamp(56px, calc((100vw - var(--lateral)) * .075), 104px);
    }

    .splash__intro {
        font-size: 24px;
    }

    .splash__decouvrir {
        position: absolute;
        inset-block-end: 24px;
        inset-inline-start: 50%;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        transform: translateX(calc(-50% * var(--sens)));
        transition: opacity var(--transition);
    }

    .splash__decouvrir:hover {
        opacity: .7;
    }

    .splash__decouvrir .icone {
        width: 20px;
        height: 20px;
        color: var(--accent-lien);
    }
}


/* ---------- 20. Accueil : cartes photo « Portes ouvertes » --------------- */

.cartes-photo {
    display: grid;
    gap: 20px;
}

.carte-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    background: var(--gris-bouton);
    color: var(--blanc);
    text-decoration: none;
}

.carte-photo__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-lente);
}

/* Dégradé sombre en bas pour lire le titre */
.carte-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 9, 19, .85) 0%, rgba(8, 9, 19, .2) 55%, rgba(8, 9, 19, 0) 100%);
}

.carte-photo__texte {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.carte-photo__titre {
    margin-block-end: 8px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
}

.carte-photo__lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
}

.carte-photo__lien .icone {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.carte-photo:hover .carte-photo__image,
.carte-photo:focus-visible .carte-photo__image {
    transform: scale(1.05);
}

@media (min-width: 576px) and (max-width: 991px) {
    .carte-photo {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 992px) {
    .cartes-photo {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .carte-photo {
        aspect-ratio: 3 / 4;
    }

    .carte-photo__texte {
        padding: 30px;
    }

    .carte-photo__titre {
        font-size: clamp(26px, calc((100vw - var(--lateral)) * .028), 36px);
    }
}


/* ---------- 21. Accueil : actualités ------------------------------------ */

.actus {
    display: grid;
    gap: 30px;
}

.actu__lien {
    display: block;
    text-decoration: none;
}

.actu__image {
    display: block;
    margin-block-end: 16px;
    overflow: hidden;
    border-radius: var(--rayon-petit);
    aspect-ratio: 16 / 9;
    background: var(--gris-bouton);
}

.actu__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-lente);
}

.actu__lien:hover .actu__image img {
    transform: scale(1.05);
}

.actu__date {
    display: block;
    margin-block-end: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--texte-attenue);
}

.actu__titre {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    transition: opacity var(--transition);
}

.actu__lien:hover .actu__titre {
    opacity: .7;
}

@media (min-width: 768px) {
    .actus {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ---------- 22. Accueil : formations pour tous les profils --------------- */

.liste-profils {
    border-block-start: 1px solid var(--filet);
}

.liste-profils__lien {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding-block: 12px;
    border-block-end: 1px solid var(--filet);
    text-decoration: none;
}

.pastille {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.liste-profils__texte {
    flex-grow: 1;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
    transition: transform var(--transition), opacity var(--transition);
}

.liste-profils__lien .icone {
    width: 22px;
    height: 22px;
    opacity: .7;
}

.liste-profils__lien:hover .liste-profils__texte {
    opacity: .7;
    transform: translateX(calc(10px * var(--sens)));
}

@media (min-width: 992px) {
    .liste-profils__lien {
        min-height: 89px;
        gap: 24px;
    }

    .liste-profils__texte {
        font-size: 32px;
    }

    .liste-profils__lien .icone {
        width: 28px;
        height: 28px;
    }
}


/* ---------- 23. Accueil : RAWAJ en chiffres ----------------------------- */

/* Mobile : carrousel horizontal (défilement natif, aimanté sur chaque carte) */
.chiffres {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    padding-block-end: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
}

.chiffres::-webkit-scrollbar {
    display: none;
}

.chiffre {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 72%;
    min-height: 300px;
    padding: 24px;
    /* Le chiffre géant de fond est coupé aux bords de la carte */
    overflow: hidden;
    border-radius: var(--rayon-petit);
    color: var(--noir);
    scroll-snap-align: start;
    /* Tailles des chiffres en « cqi » = % de la largeur de la carte (même rendu quelle que soit la carte) */
    container-type: inline-size;
}

/* Grand chiffre : occupe une grande partie de la carte (« 300 » tient sur la largeur) */
.chiffre__nombre {
    position: relative;
    font-size: 96px;
    font-size: 46cqi;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.03em;
}

/* Le même chiffre, géant et transparent, qui déborde de la carte en bas */
.chiffre__fond {
    position: absolute;
    inset-block-end: -.32em;
    inset-inline-end: -.08em;
    font-size: 240px;
    font-size: 120cqi;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    opacity: .14;
    pointer-events: none;
}

.chiffre__texte {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

/* Mode clair : texte blanc sur les cartes (demande du client).
   Menthe et safran sont un peu plus profonds ici pour que le blanc reste lisible
   (3:1 au moins, suffisant pour des textes aussi grands et gras). */
[data-theme="clair"] .chiffre {
    color: var(--blanc);
}

[data-theme="clair"] .chiffre.fond-menthe {
    background: #27a788;
}

[data-theme="clair"] .chiffre.fond-safran {
    background: #c98500;
}

.chiffres__bouton {
    margin-block-start: 30px;
}

@media (min-width: 576px) {
    .chiffre {
        flex-basis: 44%;
    }
}

/* Ordinateur : grille de 2 × 2 (petits écrans), puis 4 cartes sur une ligne dès 1200 px */
@media (min-width: 992px) {
    .chiffres {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

    .chiffre {
        min-height: 0;
        aspect-ratio: 4 / 3;
        padding: 30px;
    }

    .chiffre__texte {
        font-size: clamp(20px, calc((100vw - var(--lateral)) * .02), 26px);
    }

    .chiffres__bouton {
        margin-block-start: 40px;
    }
}

@media (min-width: 1200px) {
    .chiffres {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .chiffre {
        aspect-ratio: 357 / 450;
    }
}


/* ---------- 24. Accueil : bannière « Une question ? » et 4 colonnes ------- */

/* À partir de la bannière « Une question ? » (et dans le pied de page) :
   boutons WhatsApp en texte blanc, même en mode sombre, sur le vert profond (5:1) */
.banniere,
.pied {
    --whatsapp-fond: #15803d;
    --whatsapp-fond-survol: #126b33;
    --whatsapp-texte: var(--blanc);
}

.banniere {
    position: relative;
    display: grid;
    overflow: hidden;
    padding: 32px 24px;
    border-radius: var(--rayon-grand);
    background: var(--accent);
    color: var(--noir);
}

.banniere__titre {
    margin-block-end: 16px;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
}

.banniere__intro {
    margin-block-end: 24px;
    font-size: 18px;
}

.banniere__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.banniere__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    font-weight: 700;
    text-underline-offset: 3px;
}

.banniere__tel:hover {
    text-decoration: none;
}

.banniere__visuel {
    display: none;
}

@media (min-width: 768px) {
    .banniere {
        grid-template-columns: 1fr 260px;
        gap: 30px;
        align-items: end;
        padding-block-end: 0;
    }

    .banniere__texte {
        align-self: center;
        padding-block-end: 32px;
    }

    .banniere__visuel {
        display: block;
        aspect-ratio: 1 / 1.1;
    }

    .banniere__visuel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 992px) {
    .banniere {
        grid-template-columns: 1fr 34%;
        min-height: 307px;
        padding: 50px 60px 0;
    }

    .banniere__texte {
        padding-block-end: 50px;
    }

    .banniere__titre {
        font-size: clamp(40px, calc((100vw - var(--lateral)) * .05), 64px);
    }
}

.colonnes {
    display: grid;
    gap: 36px;
    margin-block-start: 50px;
}

.colonne {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Icône noire dans un carré de couleur : lisible en mode sombre comme en mode clair */
.colonne__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-block-end: 16px;
    border-radius: var(--rayon-petit);
    color: var(--noir);
}

.colonne__icone .icone {
    width: 26px;
    height: 26px;
}

.colonne__titre {
    margin-block-end: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.colonne__texte {
    margin-block-end: 12px;
    color: var(--texte-attenue);
}

.colonne__lien {
    margin-block-start: auto; /* liens alignés en bas de chaque colonne */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--transition);
}

.colonne__lien:hover {
    opacity: .7;
}

.colonne__lien .icone {
    width: 18px;
    height: 18px;
    color: var(--accent-lien);
}

@media (min-width: 576px) {
    .colonnes {
        grid-template-columns: 1fr 1fr;
    }
}

/* Accueil, mobile (.colonnes--cartes) : chaque lien devient une carte cliquable, comme dans une application
   (icône à gauche, titre et texte, flèche à droite ; toute la carte est cliquable) */
@media (max-width: 767px) {
    .colonnes.colonnes--cartes {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-block-start: 30px;
    }

    .colonnes--cartes .colonne {
        position: relative;
        display: grid;
        grid-template-columns: 48px 1fr 24px;
        column-gap: 14px;
        row-gap: 2px;
        align-items: center;
        padding: 16px;
        border: 1px solid var(--filet);
        border-radius: 16px;
        background: var(--carte);
        transition: transform var(--transition);
    }

    /* Petit effet d'appui au doigt */
    .colonnes--cartes .colonne:active {
        transform: scale(.98);
    }

    .colonnes--cartes .colonne:has(.colonne__lien:focus-visible) {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }

    .colonnes--cartes .colonne__icone {
        grid-row: 1 / 3;
        grid-column: 1;
        margin: 0;
    }

    .colonnes--cartes .colonne__titre {
        grid-column: 2;
        margin: 0;
        font-size: 18px;
    }

    .colonnes--cartes .colonne__texte {
        grid-column: 2;
        margin: 0;
        font-size: 16px;
        line-height: 1.35;
    }

    /* « En savoir plus » : seule la flèche reste visible (le texte est lu par les lecteurs d'écran) */
    .colonnes--cartes .colonne__lien {
        grid-row: 1 / 3;
        grid-column: 3;
        justify-content: center;
        min-height: 0;
        margin: 0;
        font-size: 0;
    }

    .colonnes--cartes .colonne__lien .icone {
        width: 20px;
        height: 20px;
        color: var(--texte-attenue);
    }

    /* Toute la carte est cliquable */
    .colonnes--cartes .colonne__lien::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .colonnes--cartes .colonne__lien:focus-visible {
        outline: none;
    }
}

@media (min-width: 992px) {
    .colonnes {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin-block-start: 80px;
    }
}


/* ---------- 25. Pages intérieures : en-tête (photo + carte qui chevauche) - */

/* Grande photo arrondie, puis carte qui remonte sur le bas de la photo (modèle page programme BdeB) */
.entete-page__photo {
    height: 220px;
    margin-inline: var(--gouttiere);
    overflow: hidden;
    border-radius: var(--rayon-grand);
    background: var(--gris-bouton);
}

.entete-page__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%; /* les visages sont souvent dans le haut de la photo */
}

.entete-page__carte {
    position: relative;
    display: grid;
    gap: 30px;
    margin-block-start: -40px;
}

/* Pages sans photo (contact, confidentialité, actualités) */
.entete-page--sans-photo .entete-page__carte {
    margin-block-start: 0;
}

.etiquette {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 12px;
    font-size: 14px;
    font-weight: 700;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 16px;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--carte-fond-doux);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.titre-page {
    margin-block-end: 16px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 24px;
}

/* Colonne de droite de la carte : conditions, prix, liens */
.aside-bloc + .aside-bloc {
    margin-block-start: 24px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--filet);
}

.aside-titre {
    margin-block-end: 12px;
    font-size: 18px;
    font-weight: 700;
}

/* Liste à puces carrées orange */
.liste-carree li {
    position: relative;
    padding-inline-start: 22px;
}

.liste-carree li + li {
    margin-block-start: 6px;
}

.liste-carree li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .6em;
    width: 8px;
    height: 8px;
    background: var(--accent);
}

/* Liste à puces rondes orange (textes saisis dans l'admin, voir texte_riche()) */
.liste-puces {
    margin-block: 1em;
}

.liste-puces li {
    position: relative;
    padding-inline-start: 22px;
}

.liste-puces li + li {
    margin-block-start: 6px;
}

.liste-puces li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* Prix : « 300 DH TTC / mois » */
.prix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding-block: 6px;
}

.prix__montant {
    font-size: 24px;
    font-weight: 900;
}

.prix__montant .ttc {
    font-size: 13px;
}

/* Liens en gras avec une petite flèche dans un carré orange */
.liens-fleches a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--transition);
}

.liens-fleches a:hover {
    opacity: .7;
}

.liens-fleches__icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--noir);
}

.liens-fleches__icone .icone {
    width: 16px;
    height: 16px;
}

@media (min-width: 768px) {
    .entete-page__photo {
        height: 360px;
    }

    .entete-page__carte {
        margin-block-start: -80px;
    }
}

@media (min-width: 992px) {
    .entete-page__photo {
        height: 520px;
        margin-inline: 20px;
    }

    .entete-page__carte {
        grid-template-columns: 1.5fr 1fr;
        gap: 0;
        margin-block-start: -160px;
        padding: 50px;
    }

    .entete-page__principal {
        padding-inline-end: 40px;
    }

    .entete-page__aside {
        padding-inline-start: 40px;
        border-inline-start: 1px solid var(--filet);
    }

    .titre-page {
        font-size: 48px;
    }
}


/* ---------- 26. Pages intérieures : blocs de contenu ---------------------- */

/* Section rapprochée de l'en-tête (pages sans photo) */
.section--serree {
    padding-block-start: 30px;
}

/* Petit texte sous le titre d'une section */
.section__intro {
    max-width: 760px;
    margin-block: -10px 30px;
}

/* Texte + photo sur deux colonnes */
.deux-colonnes {
    display: grid;
    gap: 30px;
}

.deux-colonnes__photo {
    overflow: hidden;
    border-radius: var(--rayon-grand);
    aspect-ratio: 4 / 3;
    background: var(--gris-bouton);
}

.deux-colonnes__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texte long (descriptions, actualités, confidentialité) */
.texte-long p + p,
.texte-long p + .liste-puces,
.texte-long .liste-puces + p {
    margin-block-start: 1em;
}

.texte-long h2 {
    margin-block: 40px 12px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.texte-long h2:first-child {
    margin-block-start: 0;
}

.texte-long a {
    color: var(--accent-lien);
    font-weight: 700;
}

@media (min-width: 992px) {
    .deux-colonnes {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 60px;
    }

    .texte-long h2 {
        font-size: 28px;
    }
}

/* Accordéon (programme) : <details> natif, ouvert au clic ou au clavier sans JavaScript */
:root {
    interpolate-size: allow-keywords; /* ouverture animée dans les navigateurs récents */
}

.accordeon {
    display: grid;
    gap: 10px;
}

.accordeon__item {
    border-radius: var(--rayon-petit);
    background: var(--carte);
    transition: background-color var(--transition-lente);
}

.accordeon__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
}

.accordeon__item[open]::details-content {
    block-size: auto;
}

.accordeon__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.accordeon__titre::-webkit-details-marker {
    display: none;
}

.accordeon__plus {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--noir);
    transition: transform .3s ease;
}

.accordeon__plus .icone {
    width: 20px;
    height: 20px;
}

.accordeon__item[open] .accordeon__plus {
    transform: rotate(45deg);
}

.accordeon__contenu {
    padding: 0 20px 24px;
    color: var(--texte-attenue);
}

@media (min-width: 992px) {
    .accordeon__titre {
        min-height: 80px;
        padding: 20px 30px;
        font-size: 28px;
    }

    .accordeon__contenu {
        padding: 0 30px 30px;
    }
}

/* Témoignages : carrousel qu'on fait glisser au doigt (comme « RAWAJ en chiffres »),
   une carte de la couleur de la formation par stagiaire */
.temoignages {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    padding-block-end: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
}

.temoignages::-webkit-scrollbar {
    display: none;
}

.temoignages > li {
    display: flex;
    flex: 0 0 85%;
    scroll-snap-align: start;
}

.temoignage-carte {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 28px 24px;
    border-radius: var(--rayon-grand);
    color: var(--noir);
}

.temoignage__guillemet {
    display: block;
    font-size: 72px;
    font-weight: 900;
    line-height: .6;
}

.temoignage-carte blockquote {
    margin: 16px 0 24px;
}

.temoignage-carte blockquote p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

/* Nom, origine et formation en bas de la carte */
.temoignage-carte figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: auto;
    font-size: 16px;
}

.temoignage-carte__formation {
    align-self: flex-start;
    margin-block-start: 10px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(8, 9, 19, .12);
    font-size: 14px;
    font-weight: 700;
}

.temoignages__note {
    margin-block-start: 12px;
    font-size: 13px;
    color: var(--texte-attenue);
}

@media (min-width: 576px) {
    .temoignages > li {
        flex-basis: 48%;
    }
}

@media (min-width: 992px) {
    .temoignages {
        gap: 20px;
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* 2 cartes et demie : la carte coupée montre qu'il y en a d'autres à faire défiler */
    .temoignages > li {
        flex-basis: 38%;
    }

    .temoignage-carte {
        padding: 36px 32px;
    }
}

/* 3 colonnes au lieu de 4 */
@media (min-width: 992px) {
    .colonnes--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.colonnes--sans-marge {
    margin-block-start: 0;
}

/* Étapes numérotées (inscription) */
.etapes {
    display: grid;
    gap: 12px;
    counter-reset: etape;
}

.etape {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: var(--rayon-petit);
    color: var(--noir);
    counter-increment: etape;
}

.etape::before {
    content: counter(etape);
    margin-block-end: 16px;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
}

.etape strong {
    font-size: 22px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .etapes {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Liste des documents (inscription) */
.documents {
    display: grid;
    gap: 12px;
}

.document {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 16px 20px;
    border-radius: var(--rayon-petit);
    background: var(--carte);
    font-weight: 700;
}

.document .colonne__icone {
    margin: 0;
}

@media (min-width: 768px) {
    .documents {
        grid-template-columns: 1fr 1fr;
    }
}

/* Créneaux dans une page (mêmes cartes que la modale) */
.creneaux--page {
    margin-block: 0;
}


/* ---------- 27. Formations (liste) -------------------------------------- */

.cartes-formations {
    display: grid;
    gap: 20px;
}

.carte-formation {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    background: var(--carte);
    text-decoration: none;
    transition: background-color var(--transition-lente);
}

.carte-formation__photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gris-bouton);
}

.carte-formation__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-lente);
}

.carte-formation:hover .carte-formation__photo img {
    transform: scale(1.05);
}

.carte-formation__corps {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}

.carte-formation__titre {
    margin-block-end: 8px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
}

.carte-formation__accroche {
    margin-block-end: 20px;
    color: var(--texte-attenue);
}

.carte-formation__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: auto;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--filet);
}

.carte-formation__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.carte-formation__lien .icone {
    color: var(--accent-lien);
}

@media (min-width: 768px) {
    .cartes-formations {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (min-width: 992px) {
    .carte-formation__corps {
        padding: 30px;
    }

    .carte-formation__titre {
        font-size: 32px;
    }
}


/* ---------- 28. Centres --------------------------------------------------- */

.liste-centres {
    display: grid;
    gap: 30px;
}

.carte-centre {
    display: grid;
    gap: 24px;
    padding: 16px;
}

.carte-centre__photo {
    overflow: hidden;
    border-radius: var(--rayon-petit);
    aspect-ratio: 4 / 3;
    background: var(--gris-bouton);
}

.carte-centre__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-centre__nom {
    margin-block-end: 16px;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.15;
}

.carte-centre__details li {
    display: flex;
    gap: 12px;
}

.carte-centre__details li + li {
    margin-block-start: 10px;
}

.carte-centre__details .icone {
    width: 20px;
    height: 20px;
    margin-block-start: 3px;
    color: var(--accent-lien);
}

.carte-centre__details a {
    font-weight: 700;
    text-underline-offset: 3px;
}

/* Emplacement de la carte Google Maps (chargée au clic) */
.carte-centre__carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    padding: 20px;
    overflow: hidden;
    border-radius: var(--rayon-petit);
    background: var(--carte-fond-doux);
    font-size: 14px;
    text-align: center;
    color: var(--texte-attenue);
}

.carte-centre__carte iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

.carte-centre__carte.est-chargee {
    padding: 0;
}

@media (min-width: 992px) {
    .carte-centre {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 30px;
    }

    .carte-centre__infos {
        align-self: center;
    }

    .carte-centre__nom {
        font-size: 40px;
    }

    .carte-centre__carte {
        grid-column: 1 / -1;
        min-height: 360px;
    }

    /* Pas encore de photo du centre : la carte Google prend sa place */
    .carte-centre--sans-photo .carte-centre__carte {
        grid-column: auto;
    }
}


/* ---------- 29. Recruteurs, contact, actualités --------------------------- */

/* Logos partenaires (placeholders tant qu'aucun logo n'est déposé) */
.logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.logo-partenaire {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    padding: 16px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon-petit);
    background: var(--carte);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--texte-attenue);
}

/* Logos des partenaires : tous en gris clair un peu transparent (quelle que soit leur couleur),
   pour un mur de logos uniforme ; pas de lien. Les fichiers vont dans assets/img/partenaires/
   (ordre d'affichage = numéro au début du nom : 1-INDH.svg, 2-…). */
.logo-partenaire img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(1) brightness(0);
    opacity: .4;
}

/* Mode sombre : les logos passent en gris clair */
[data-theme="sombre"] .logo-partenaire img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .5;
}

@media (min-width: 768px) {
    .logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .logos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Cartes de contact */
.contacts {
    display: grid;
    gap: 20px;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.contact__titre {
    font-size: 22px;
    font-weight: 900;
}

.contact__texte {
    color: var(--texte-attenue);
}

.contact__grand {
    font-size: 22px;
    font-weight: 700;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.contact .actions {
    margin-block-start: auto;
    padding-block-start: 12px;
}

.contact--whatsapp {
    background: var(--whatsapp-fond);
    color: var(--whatsapp-texte);
}

.contact--whatsapp .contact__texte {
    color: var(--whatsapp-texte);
}

.contact--whatsapp .bouton {
    background: var(--noir);
    color: var(--blanc);
}

.liste-tel li + li {
    margin-block-start: 8px;
}

.liste-tel a {
    font-weight: 700;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .contacts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .contacts {
        gap: 30px;
    }

    .contact.carte {
        padding: 40px;
    }
}

/* Liste des actualités : résumé sous le titre */
.actu__resume {
    margin-block-start: 8px;
    font-size: 16px;
    color: var(--texte-attenue);
}

.actus--page {
    row-gap: 50px;
}

/* Page d'une actualité */
.article {
    max-width: 820px;
}

.article__image {
    margin-block: 24px;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    aspect-ratio: 16 / 9;
    background: var(--gris-bouton);
}

.article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mise-a-jour {
    font-size: 14px;
    color: var(--texte-attenue);
}


/* ---------- 30. Formulaires ---------------------------------------------- */

/* Grille : 1 colonne sur mobile, 2 sur ordinateur (les champs « larges » prennent toute la ligne) */
.formulaire {
    display: grid;
    gap: 24px;
}

.formulaire__note {
    font-size: 15px;
    color: var(--texte-attenue);
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.champ__label {
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.requis {
    color: var(--accent-lien);
}

.champ__facultatif {
    font-weight: 400;
    color: var(--texte-attenue);
}

.champ__aide {
    margin-block-start: -2px;
    font-size: 15px;
    color: var(--texte-attenue);
}

/* Champs : 18 px (pas de zoom automatique sur iPhone), 56 px de haut */
.champ__saisie {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 2px solid var(--champ-bord);
    border-radius: var(--rayon-petit);
    background: var(--champ-fond);
    color: var(--texte);
    font: inherit;
    font-size: 18px;
    transition: border-color var(--transition);
}

textarea.champ__saisie {
    min-height: 120px;
    resize: vertical;
}

.champ__saisie:hover {
    border-color: var(--texte);
}

.champ__saisie:focus-visible {
    border-color: var(--accent);
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}

.champ__saisie::placeholder {
    color: var(--texte-attenue);
    opacity: .7;
}

.champ__saisie[aria-invalid="true"] {
    border-color: var(--erreur);
}

.champ__erreur {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--erreur);
}

.champ__erreur .icone {
    width: 16px;
    height: 16px;
}

/* Choix en grandes tuiles (formation, centre, créneaux) : toute la tuile est cliquable */
.choix {
    display: grid;
    gap: 10px;
}

.choix__option {
    /* Couleur du choix sélectionné : orange par défaut, couleur de la formation pour « Formation souhaitée » */
    --choix-couleur: var(--accent);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 16px;
    border: 2px solid var(--champ-bord);
    border-radius: var(--rayon-petit);
    background: var(--champ-fond);
    line-height: 1.3;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.choix__option:hover {
    border-color: var(--texte);
}

.choix__option:has(input:checked) {
    border-color: var(--choix-couleur);
    background: color-mix(in srgb, var(--choix-couleur) 14%, transparent);
}

.choix__option:has(input:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.choix__option input,
.case input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--choix-couleur, var(--accent));
}

.choix__option input:focus-visible,
.case input:focus-visible {
    outline: none;
}

.choix__detail {
    display: block;
    font-size: 14px;
    color: var(--texte-attenue);
}

[aria-invalid="true"] .choix__option {
    border-color: var(--erreur);
}

/* Case de consentement */
.case {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    cursor: pointer;
}

.case input {
    margin-block-start: 2px;
}

.case:has(input:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.case a {
    color: var(--accent-lien);
    font-weight: 700;
}

.formulaire__envoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bouton--grand {
    width: 100%;
    min-height: 60px;
    font-size: 18px;
}

.bouton:disabled {
    opacity: .6;
    cursor: wait;
}

/* Page merci : bloc WhatsApp mis en avant et résumé de la demande */
.merci-whatsapp {
    margin-block-start: 30px;
    padding: 24px;
    border-radius: var(--rayon-petit);
    background: var(--carte-fond-doux);
}

.merci-whatsapp p {
    margin-block-end: 16px;
}

.recap dt {
    font-size: 14px;
    color: var(--texte-attenue);
}

.recap dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-weight: 700;
}

/* Messages en haut du formulaire */
.alerte {
    margin-block-end: 30px;
    padding: 20px 24px;
    border-inline-start: 6px solid;
    border-radius: var(--rayon-petit);
    background: var(--carte-fond-doux);
}

.alerte:focus {
    outline: none;
}

.alerte--erreur {
    border-color: var(--erreur);
}

.alerte--succes {
    border-color: var(--whatsapp);
}

.alerte__titre {
    margin-block-end: 6px;
    font-size: 18px;
    font-weight: 900;
}

.alerte ul {
    margin-block-start: 10px;
    padding-inline-start: 20px;
    list-style: disc;
}

.alerte a {
    font-weight: 700;
    color: inherit;
}

@media (min-width: 576px) {
    .choix--2 {
        grid-template-columns: 1fr 1fr;
    }

    .choix--4 {
        grid-template-columns: 1fr 1fr;
    }

    .bouton--grand {
        width: auto;
        padding-inline: 40px;
    }
}

@media (min-width: 992px) {
    .formulaire {
        grid-template-columns: 1fr 1fr;
        gap: 28px 30px;
    }

    .formulaire__note,
    .champ--large {
        grid-column: 1 / -1;
    }

    .choix--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .choix--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ---------- 30 bis. Ajustements mobile -------------------------------- */

/* Actualités de l'accueil : carrousel au doigt sur mobile (comme « RAWAJ en chiffres ») */
@media (max-width: 767px) {
    .actus--defilant {
        display: flex;
        gap: 16px;
        margin-inline: calc(var(--gouttiere) * -1);
        padding-inline: var(--gouttiere);
        padding-block-end: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gouttiere);
        scrollbar-width: none;
    }

    .actus--defilant::-webkit-scrollbar {
        display: none;
    }

    .actus--defilant .actu {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
}

/* Colonnes avec icônes : icône à gauche, texte à droite sur mobile (moins de défilement) */
@media (max-width: 575px) {
    .colonnes {
        gap: 28px;
    }

    .colonne {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 16px;
        align-items: start;
    }

    .colonne > * {
        grid-column: 2;
    }

    .colonne__icone {
        grid-column: 1;
        grid-row: 1 / span 3;
        margin: 0;
    }

    .colonne__titre {
        margin-block-start: 10px;
    }

    .colonne__texte {
        margin-block-end: 0;
    }

    .colonne__lien {
        min-height: 44px;
        margin-block-start: 2px;
    }
}

/* Carte d'un centre : emplacement de la carte Google moins haut sur mobile */
@media (max-width: 991px) {
    .carte-centre__carte {
        min-height: 180px;
    }
}


/* ---------- 31. Version arabe (RTL) ------------------------------------------
   La mise en page se retourne seule (propriétés logiques, --sens).
   Ici : seulement ce qui change avec l'écriture arabe. */

/* L'espacement entre les lettres casse les liaisons de l'arabe */
[lang="ar"] * {
    letter-spacing: 0;
}

/* Les lettres arabes montent et descendent plus : un peu plus d'interligne dans les titres */
[lang="ar"] .splash__titre,
[lang="ar"] .titre-section,
[lang="ar"] .titre-page,
[lang="ar"] .banniere__titre,
[lang="ar"] .carte-photo__titre,
[lang="ar"] .carte-formation__titre,
[lang="ar"] .carte-centre__nom,
[lang="ar"] .accordeon__titre,
[lang="ar"] .temoignage-carte blockquote p {
    line-height: 1.35;
}

/* Bloc orange des titres : la police Cairo dessine une boîte très haute autour des lettres.
   En simple texte, le fond orange débordait sur les lignes du dessus et du dessous.
   En bloc (inline-block), il prend sa vraie place dans la ligne : plus de chevauchement. */
[lang="ar"] .surligne {
    display: inline-block;
    padding-block: 0 .08em;
    line-height: 1.3;
}

/* Petits textes en majuscules latines (« LIENS UTILES ») : un peu plus grands en arabe */
[lang="ar"] .surtitre-mini,
[lang="ar"] .badge {
    font-size: 12px;
    text-transform: none;
}

/* Guillemet du témoignage : retourné, comme il s'ouvre à droite en arabe */
[lang="ar"] .temoignage__guillemet {
    display: inline-block;
    transform: scaleX(-1);
}


/* ---------- 32. Mouvement réduit (préférence du visiteur) ---------------- */

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