/* ============================================================
   public.css — Pages publiques Lekti Atelier
   Palette : corail #d66559 + aubergine #301B3C + taupe #7c6a76
   Typographie : Poppins (titres) / Inter (corps)
   ============================================================ */

/* ── POLICES ─────────────────────────────────────────────────── */
/* Chemins relatifs à cette feuille (assets/css/) : indépendants du dossier de
   déploiement (atelier2, atelier), ce que BASE_URL ne peut pas fournir dans du CSS. */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── RESET ET BASE ───────────────────────────────────────────── */

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

:root {
    /* Corail #d66559 : bordures de survol et de focus (élément d'interface : 3,58:1 suffit).
       Corail foncé #c0524a : tout fond qui porte du texte blanc (bandeau, pied de page,
       pastilles, boutons : 4,62:1 ; le blanc sur #d66559 ne fait que 3,58:1).
       Le texte reste en --color-text, les liens en taupe. */
    --color-corail:       #d66559;
    --color-corail-dark:  #c0524a;

    /* Aubergine : fonds sombres (en-tête du bloc méta, bouton « Nous contacter »,
       témoignage, « point atelier »). Texte clair dessus. */
    --color-aubergine:    #301B3C;

    /* Taupe : fonds mats (bandeaux de section, bouton secondaire, pastille de date).
       Même valeur que --color-prune, qui reste utilisée pour du texte et des liserés. */
    --color-taupe:        var(--color-prune);

    /* Palette prune */
    --color-prune:        #7c6a76;
    --color-prune-mid:    #6a5a64;
    --color-prune-dark:   #584b57;
    --color-prune-deep:   #3d3340;
    --color-prune-light:  #b0a0ac;

    /* Neutres */
    --color-bg:           #ffffff;
    --color-surface:      #ffffff;
    --color-text:         #1a1a1a;
    --color-text-light:   #4d4d4d;
    --color-muted:        #6b6b6b;
    --color-border:       #d9d9d9;


    /* Typographie */
    --font-titre:  'Poppins', system-ui, sans-serif;
    --font-corps:  'Inter', system-ui, sans-serif;

    /* Mise en page */
    --radius:      4px;
    --radius-lg:   8px;
    --max-width:   1080px;
    --col-content: 1fr;
    --col-meta:    320px;
}

body {
    font-family: var(--font-corps);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}

/* ── TYPOGRAPHIE ─────────────────────────────────────────────── */

/* Graisse unique des titres : 500 (Poppins Medium), la plus lourde des graisses
   livrées avant la 700. Réglée ici seulement : les règles de titres plus bas en héritent. */
h1, h2, h3, h4 {
    font-family: var(--font-titre);
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

p { margin-bottom: 1rem; }

a {
    color: var(--color-taupe);
    text-decoration: none;
}

a:hover { color: var(--color-corail-dark); }

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

li { margin-bottom: 0.3rem; }

strong { font-weight: 600; }


/* ── NAVIGATION ──────────────────────────────────────────────── */

.site-nav {
    background: var(--color-corail-dark);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.site-nav .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-titre);
    font-weight: 500;
    /* Taille fluide : 1,5rem sur grand écran, réduite quand le menu se rapproche */
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.06em;
    margin-right: auto;
    text-decoration: none;
}

.site-nav .brand img {
    height: 95px;
    width: auto;
    display: block;
}

.site-nav .brand span {
    color: #fff;
    line-height: 1;
}

/* Checkbox toggle — caché visuellement */
.nav-toggle-input {
    display: none;
}

/* Hamburger — visible uniquement en mobile */
.nav-toggle-label {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle-label span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Animation hamburger → croix */
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
}
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a.active {
    color: #fff;
    background: rgba(0,0,0,0.15);
}

.site-nav svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Lien « Administration » (administrateur connecté seulement) : un contour le distingue des liens du site */
.site-nav .nav-admin a {
    border: 1px solid rgba(255,255,255,0.55);
}

/* ── RESPONSIVE NAV ──────────────────────────────────────────── */

/* 800px et non 768px comme le reste du site : mesuré dans le navigateur, le bandeau
   (logo, nom en capitales, trois liens) ne tient sur une ligne qu'à partir de 790px */
@media (max-width: 800px) {
    .site-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 0.75rem 1rem;
    }

    .nav-toggle-label {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0 0.75rem;
        gap: 0;
    }

    .nav-toggle-input:checked ~ .nav-menu {
        display: flex;
    }

    .site-nav a {
        padding: 0.6rem 0.5rem;
        font-size: 0.95rem;
        width: 100%;
    }

    .site-nav .brand {
        flex: 1;
    }

    /* Barre en hauteur automatique et collante : le grand logo du bureau la rendrait
       trop haute sur un écran étroit */
    .site-nav .brand img {
        height: 42px;
    }
}
/* ── CONTENEUR PRINCIPAL ─────────────────────────────────────── */

.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

/* ── FOOTER ──────────────────────────────────────────────────── */

.site-footer {
    background: var(--color-corail-dark);
    color: #fff;
    padding: 2rem 1.5rem;
    margin-top: 2rem;
    font-size: 0.875rem;
}

.site-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
}

.site-footer a { color: #fff; }
/* Le texte est déjà blanc plein : le survol se marque par le soulignement */
.site-footer a:hover { text-decoration: underline; }

.qualiopi-mention {
    font-size: 0.8rem;
    color: #fff;
    line-height: 1.5;
}

.qualiopi-mention strong { color: #fff; }

/* ── LISTE DES FORMATIONS ────────────────────────────────────── */

.formations-header {
    margin-bottom: 2.5rem;
}

.formations-header h1 {
    margin-bottom: 0.5rem;
    color: #000;
}

.formations-header p {
    color: var(--color-text-light);
    font-size: 1.05rem;
    margin: 0;
}

/* Grille de cartes */
.formations-grid {
    display: grid;
    gap: 1.5rem;
}

/* Carte formation */
.formation-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 1rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.formation-card:hover {
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.1);
    border-color: var(--color-corail);
}

.formation-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.formation-card h2 {
    font-size: 1.15rem;
    margin: 0;
    line-height: 1.35;
}

.formation-card h2 a {
    color: var(--color-taupe);
    text-decoration: none;
}

.formation-card h2 a:hover { color: var(--color-prune); }

/* Badge session */
.session-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-taupe);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.session-badge-secondary {
    background: transparent;
    color: var(--color-prune);
    border: 1px solid var(--color-prune-light);
}

/* Résumé */
.formation-card-resume {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Méta compacte */
.formation-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.formation-card-meta span::before {
    margin-right: 0.3rem;
    opacity: 0.7;
}

/* CTA de la carte */
.formation-card-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── DÉTAIL FORMATION ────────────────────────────────────────── */

/* Layout deux colonnes */
.formation-layout {
    display: grid;
    grid-template-columns: 1fr var(--col-meta);
    gap: 3rem;
    align-items: start;
}

/* Colonne contenu */
.formation-content {
    min-width: 0;
}

.formation-titre {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #000;   
}

.formation-sous-titre {
    font-size: 1.15rem;
    color: var(--color-prune);
    font-family: var(--font-titre);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.formation-resume {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

/* Sections h2 */
.formation-section {
    margin-bottom: 2.5rem;
}

.formation-section h2 {
    font-size: 1.25rem;
    color: var(--color-text);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
}

/* Compétences et modules */
.competence {
    margin-bottom: 1.5rem;
}

.competence h3 {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Modules numérotés : le numéro vient du gabarit (data-num), remis à 1 à chaque journée */
.module-journee {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 2.25rem 0 1rem;
}

.module-journee:first-child {
    margin-top: 0;
}

.module {
    margin-bottom: 1.75rem;
}

.module h3,
.module h4 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.module h3::before,
.module h4::before {
    content: attr(data-num);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--color-corail-dark);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Points standard */
.module ul,
.competence ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module ul li,
.competence ul li {
    padding: 0.2rem 0 0.2rem 1.1rem;
    position: relative;
    font-size: 0.95rem;
    color: var(--color-text);
}

.module ul li::before,
.competence ul li::before {
    content: '•';
    position: absolute;
    left: 0.15rem;
    color: var(--color-text);
}

/* Points atelier — fond ocre */
.module ul li.point-atelier,
.point-atelier {
    background: var(--color-aubergine);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    color: #fff;
    font-weight: 500;
    margin: 0.4rem 0;
}

.module ul li.point-atelier::before {
    content: '🛠';
    font-size: 0.85rem;
    left: 0.5rem;
}

/* Bloc formateur : sans encadré, il se lit comme la suite de la section */
.formateur-card {
    margin-top: 1rem;
}

.formateur-card-name {
    font-family: var(--font-titre);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--color-taupe);
    margin-bottom: 0.2rem;
}

.formateur-card-qualification {
    font-size: 0.875rem;
    color: var(--color-prune-dark);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.formateur-card-bio {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
}

/* Documents */
.documents-list {
    list-style: none;
    padding: 0;
}

.documents-list li {
    margin-bottom: 0.5rem;
}

.documents-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-taupe);
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: border-color 0.15s, color 0.15s;
}

.documents-list a::before { content: '📄'; }

.documents-list a:hover {
    border-color: var(--color-prune);
    color: var(--color-prune);
}

/* ── COLONNE META (droite sticky) ────────────────────────────── */

.formation-meta-col {
    position: sticky;
    top: 120px; /* hauteur de la barre (100px) + 20px d'espace */
}

.formation-meta-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.07);
}

/* En-tête du bloc méta */
.formation-meta-header {
    background: var(--color-aubergine);
    padding: 1.25rem 1.5rem;
    color: #fff;
}

.formation-meta-header .meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

/* Sessions dans le bloc méta */
.meta-sessions {
    margin-bottom: 0.25rem;
}

.meta-session-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
    margin-bottom: 0.3rem;
}

.meta-session-type {
    font-size: 0.75rem;
    opacity: 0.75;
    background: rgba(255,255,255,0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

/* Corps du bloc méta */
.formation-meta-body {
    padding: 1.25rem 1.5rem;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.meta-row:last-child { border-bottom: none; }

.meta-row-label {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    white-space: nowrap;
}

.meta-row-value {
    color: var(--color-text);
    font-weight: 500;
    text-align: right;
}

/* CTA contact */
.formation-meta-cta {
    padding: 1.25rem 1.5rem;
}

/* ── BOUTONS ─────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-titre);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.btn-primary {
    background: var(--color-corail-dark);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-aubergine);
    color: #fff;
}

.btn-prune {
    background: var(--color-aubergine);
    color: #fff;
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.75rem 1.25rem;
}

.btn-prune:hover {
    background: var(--color-taupe);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-taupe);
    border: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.btn-outline:hover {
    border-color: var(--color-corail);
    color: var(--color-corail-dark);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .formation-layout {
        grid-template-columns: 1fr;
    }

    /* Le bloc méta remonte avant le contenu sur mobile */
    .formation-meta-col {
        order: -1;
        position: static;
    }

    .formation-titre { font-size: 1.5rem; }

    .site-nav { padding: 0 1rem; gap: 1rem; }

    .site-nav ul { gap: 0; }

    .site-nav a { font-size: 0.8rem; padding: 0.35rem 0.5rem; }

    .site-main { padding: 1.5rem 1rem; }

    .formation-card { padding: 1.25rem; }
}
.formation-content .formation-section h2 {
    font-size: 1.25rem;
    color: #fff;
    background-color: var(--color-taupe);
    padding: 0.7rem;
    margin: 2rem 0 0.4rem 0;
    border-bottom: none;
}
/* ── BLOCS PAGES ─────────────────────────────────────────────── */

.bloc-hero {
    text-align: center;
    padding: 3rem 0 2rem;
    margin-bottom: 2rem;
}

.bloc-hero h1 {
    font-size: clamp(1.47rem, 3.33vw, 2.13rem); /* deux tiers de l'ancienne taille (2,2 / 5 / 3,2) */
    font-weight: 400; /* la graisse la plus légère livrée */
    color: var(--color-text);
    margin-bottom: 1rem;
}

.bloc-hero-sous-titre {
    font-family: var(--font-titre);
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    color: var(--color-text-light);
    margin: 0 auto 2.5rem;
}

.bloc-hero-texte {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    text-align: left;
    column-count: 2;
    column-gap: 3rem;
}

.bloc-hero-texte p {
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .bloc-hero-texte { column-count: 1; }
}

/* Appel à l'action : pastille avec flèche */
.bloc-hero .btn-primary {
    border-radius: 999px;
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

.bloc-hero .btn-primary::after {
    content: '→';
    margin-left: 0.6rem;
}

/* Rythme vertical des blocs : 2 rem entre deux blocs, portés par les marges (qui se
   confondent entre frères : 2 rem, pas 4). Aucun padding sans filet à séparer, et le titre
   d'un bloc ne rajoute pas la marge haute du h2 global (2 rem) à celle du bloc. */
.bloc-service,
.bloc-texte-libre,
.bloc-actualite {
    margin-bottom: 2rem;
}

.bloc-service > h2,
.bloc-texte-libre > h2,
.bloc-actualite > h2,
.bloc-carrousel > h2,
.bloc-formations > h2,
.bloc-contact-form > h2 {
    margin-top: 0;
}

.bloc-service:last-of-type,
.bloc-texte-libre:last-of-type,
.bloc-actualite:last-of-type {
    border-bottom: none;
}

.bloc-texte {
    color: var(--color-text-light);
    line-height: 1.75;
}

.bloc-texte p { margin-bottom: 0.9rem; }
.bloc-texte ul, .bloc-texte ol { margin-bottom: 0.9rem; }

/* Témoignages */
.bloc-temoignage {
    background: var(--color-aubergine);
    border-left: 4px solid var(--color-prune);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.bloc-temoignage blockquote {
    font-size: 1.05rem;
    color: #fff;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.bloc-temoignage cite {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    font-style: normal;
    font-weight: 500;
}

/* ── BANDES DÉFILANTES (carrousel de logos, carrousel de témoignages) ──
   Défilement natif (scroll-snap) : tout le contenu est dans le HTML, la bande se manie au
   doigt, à la molette et au clavier. Les boutons Précédent et Suivant sont ajoutés par
   assets/js/defilement.js, seulement si le contenu déborde. */

.bloc-carrousel {
    margin-top: 2rem;
}

.bloc-carrousel > h2 { margin-bottom: 1.5rem; }

/* Bande aubergine pleine largeur (carrousel de témoignages seulement : les logos clients,
   souvent sombres, y seraient illisibles). L'ombre portée étale le fond hors de la colonne
   de .site-main, et clip-path la borne à la largeur de l'écran : pas de défilement horizontal
   de la page. Titre, flèches et focus sont redéfinis car leurs couleurs d'origine
   (texte, flèches et contour aubergine) disparaîtraient sur ce fond. */
.bloc-carrousel-sombre {
    background: var(--color-aubergine);
    box-shadow: 0 0 0 100vmax var(--color-aubergine);
    clip-path: inset(0 -100vmax);
    padding: 2.5rem 0; /* respiration intérieure de la bande, hors rythme entre blocs */
    color: #fff;
}

.bloc-carrousel-sombre > h2 { color: #fff; }

.bloc-carrousel-sombre .defilement-piste:focus-visible,
.bloc-carrousel-sombre .defilement-bouton:focus-visible { outline-color: #fff; }

.bloc-carrousel-sombre .defilement-bouton { color: #fff; }
.bloc-carrousel-sombre .defilement-bouton:hover { color: var(--color-corail); }
.bloc-carrousel-sombre .defilement-bouton[aria-disabled="true"]:hover { color: #fff; }

.defilement.avec-boutons {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.defilement-piste {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.defilement-piste:focus-visible {
    outline: 2px solid var(--color-aubergine);
    outline-offset: 2px;
}

/* Défilement animé seulement si le visiteur n'a pas demandé de réduire les mouvements */
@media (prefers-reduced-motion: no-preference) {
    .defilement-piste { scroll-behavior: smooth; }
}

.defilement-liste {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.defilement-item { scroll-snap-align: start; }

/* Défilement automatique (carrousel de logos, mode bande) : animation CSS posée par
   assets/js/defilement.js, qui duplique la liste. Chaque élément porte son espace en marge
   (et non en gap) : tous ont la même emprise, la moitié de la liste vaut donc exactement une
   copie et la boucle raccorde sans saut. Pause au survol, au focus clavier et par le bouton. */
.defilement-auto .defilement-piste {
    overflow: hidden;
    scroll-snap-type: none;
}

.defilement-auto .defilement-liste {
    width: max-content;
    gap: 0;
    animation: defilement-auto var(--defilement-duree, 60s) linear infinite;
}

.defilement-auto .defilement-item { margin-right: var(--espace-logos, 1.5rem); }

@keyframes defilement-auto {
    to { transform: translateX(-50%); }
}

.defilement-auto .defilement-piste:hover .defilement-liste,
.defilement-auto .defilement-piste:focus-visible .defilement-liste,
.defilement-auto.defilement-en-pause .defilement-liste {
    animation-play-state: paused;
}

/* Copies de la boucle : invisibles tant que le défilement automatique n'est pas actif */
.defilement:not(.defilement-auto) .defilement-clone { display: none; }

.defilement-pause {
    display: block;
    margin: 0.75rem 0 0 auto;
    padding: 0.3rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-aubergine);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
}

.defilement-pause:hover { border-color: var(--color-aubergine); }

.defilement-pause:focus-visible {
    outline: 2px solid var(--color-aubergine);
    outline-offset: 2px;
}

/* Logos : hauteur de ligne fixe, pour que la bande ne saute pas au chargement des images */
/* Espace entre deux logos de la bande : une seule valeur. En défilement automatique, l'espace passe
   en marge des cases (voir plus haut) et lit la même variable. */
.defilement-logos {
    --espace-logos: 2.5rem;
    gap: var(--espace-logos);
}

.defilement-logos .defilement-item {
    flex: 0 0 auto;      /* la case épouse le logo (sa taille est réservée par width et height) */
    min-width: 8rem;     /* un petit logo ou un simple nom garde une case lisible */
    display: flex;
    align-items: center;
    justify-content: center;
}

.defilement-logos img,
.logo-grille-item img {
    max-width: 100%;
    height: auto;        /* garde les proportions si max-width réduit l'image (petit écran) */
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0.85;
    transition: filter 0.2s, opacity 0.2s;
}

.defilement-logos img:hover,
.logo-grille-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.defilement-logos span,
.logo-grille-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-light);
    text-align: center;
}

/* Logos en grille (carrousel de logos, mode grille) : tous les logos d'un coup, sans animation.
   Lignes qui passent à la ligne, centrées : chaque case épouse son logo (taille réservée par
   width et height, voir le gabarit), donc des logos de formats très différents s'alignent
   sans colonnes imposées ni règle responsive à maintenir. */
.logos-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 4rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.logo-grille-item {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;     /* sur un écran plus étroit que le logo, la case ne déborde pas */
}

/* Logo dont la taille n'a pas pu être lue (pas de width/height) : limité par la même boîte que le
   gabarit (plafonds de 7 rem de haut et 18 rem de large) */
.defilement-logos img:not([height]),
.logo-grille-item img:not([height]) {
    max-height: 7rem;
    max-width: 18rem;
}

/* Témoignages : les cartes se partagent la largeur tant qu'elles tiennent (18 rem au
   minimum chacune), puis la bande défile. Sur mobile, une carte et le début de la suivante. */
.defilement-temoignages .defilement-item {
    flex: 1 0 min(18rem, 85%); /* 85 % : sur mobile, le début de la carte suivante signale qu'on peut défiler */
    display: flex;
}

.temoignage-carte {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Voile blanc sur la bande aubergine : un ton plus clair sans introduire de nouvelle
       couleur (contraste du texte blanc : 10,9:1, calculé) */
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.temoignage-carte blockquote {
    quotes: "«\00a0" "\00a0»";
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.temoignage-carte blockquote p::before { content: open-quote; }
.temoignage-carte blockquote p::after  { content: close-quote; }

.temoignage-carte figcaption {
    margin-top: auto;
    text-align: right; /* signature en bas à droite de la carte */
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.defilement-bouton {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%; /* le rond n'est plus dessiné, mais le contour de focus l'épouse */
    background: none;
    color: var(--color-aubergine);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.defilement-bouton:hover { color: var(--color-corail-dark); }

/* display:flex ci-dessus l'emporterait sur l'attribut hidden : le script cache les boutons
   quand tout tient dans la largeur, il faut donc le rétablir explicitement */
.defilement-bouton[hidden] { display: none; }

.defilement-bouton:focus-visible {
    outline: 2px solid var(--color-aubergine);
    outline-offset: 2px;
}

.defilement-bouton[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.defilement-bouton[aria-disabled="true"]:hover { color: var(--color-aubergine); }

/* Petit écran : boutons plus étroits pour laisser la place au contenu (le balayage au doigt reste le geste naturel) */
@media (max-width: 600px) {
    .defilement.avec-boutons { gap: 0.5rem; }
    .defilement-bouton { width: 2.5rem; height: 2.5rem; font-size: 1.75rem; }
}

/* ── FORMATIONS SUR L'ACCUEIL ────────────────────────────────── */

.bloc-formations {
    margin-top: 2rem;
}

.bloc-formations > h2 {
    margin-bottom: 1.5rem;
}

.bloc-formations-footer {
    margin-top: 2rem;
    text-align: center;
}

/* ── FORMULAIRE CONTACT ──────────────────────────────────────── */

.bloc-contact-form {
    margin-top: 2rem;
    padding-top: 2rem;
    max-width: 600px;
}

.bloc-contact-form h2 {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-corps);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-corail);
    box-shadow: 0 0 0 3px rgba(214, 101, 89, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.contact-feedback {
    font-size: 0.9rem;
    padding: 0.6rem 0.875rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: none;
}

.contact-feedback.error {
    display: block;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.contact-feedback.success {
    display: block;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

/* ── RESPONSIVE BLOCS ────────────────────────────────────────── */

@media (max-width: 768px) {
    .bloc-hero { padding: 2rem 0 1.5rem; }
    .bloc-hero h1 { font-size: 1.6rem; }
    .bloc-contact-form { max-width: 100%; }
}