/*=====================================================
 * @file public/assets/css/home.css
 * @brief Styles de la page d’accueil vitrine, dans la charte des pages Histoire et Technique.
 *
 * Dernière modification : 12/11/2026 16:24
 * Version : 2.3.1
 *
 * Responsabilités :
 * - cadre de la page : carte d’ouverture vert profond, feuille blanche
 *   aux sections pleine largeur, bandes parchemin et vert profond ;
 * - éléments communs : sur-titres, titres de section, liens fléchés,
 *   boutons ;
 * - sections : ouverture, repères, cartes de parcours, horaires et lieux,
 *   agenda, derniers billets, la Compagnie, adhésion et jauge, contact ;
 * - classes de largeur .w-0 à .w-100 (jauge).
 *
 * Dépendances principales :
 * - polices et variables de styles.css (--font-display, --font-text) ;
 *   Bootstrap 5.3 (carousel de l’ouverture, grille et champs du
 *   formulaire, stretched-link) et
 *   Bootstrap Icons (billet sans image) ;
 * - public/index.php, templates/main/*.php, templates/form-contact.php ;
 * - public/assets/js/home-competitions.js et home-news.js (balisage de
 *   l’agenda et des billets).
 *
 * Contraintes / remarques :
 * - chargée uniquement par l’accueil ; tout est limité à .home-page et aux
 *   classes home-*, sauf les classes .w-N ;
 * - aucune ressource externe, aucun style en ligne (CSP) ;
 * - le doré #e3c27a n’est utilisé que sur le vert profond (ouverture,
 *   bande « La Compagnie », pastille de date) ;
 * - mise en page selon la largeur de .home-page (requêtes de conteneur),
 *   et non celle de la fenêtre : la barre latérale du site (≥ 992 px)
 *   réduit la place disponible. Sous 46rem de contenu, soit une fenêtre de
 *   moins de 768 px, tout est empilé ; c’est aussi l’affichage des
 *   navigateurs sans requêtes de conteneur ;
 * - contrastes calculés (AA) : sur l’ombrage de l’ouverture, au plus
 *   clair (88 % de vert profond sur une photo blanche), #f7f3ea 7,6:1,
 *   #dfe8e1 6,6:1 et #e3c27a 4,9:1 ; #f7f3ea / vert profond 11,0:1 ; #dfe8e1 /
 *   vert profond 9,6:1 ; #e3c27a / vert profond 7,0:1 ; #0f3d27 / blanc
 *   12,2:1 ; #1f2a24 / blanc 14,8:1 ; #3a342b / parchemin 11,1:1 ;
 *   #4a4338 / blanc 9,6:1 et / parchemin 8,7:1 ; #7a5a12 / blanc 6,3:1 et
 *   / parchemin 5,7:1 ; #146c43 / blanc 6,4:1 et / parchemin 5,8:1 ;
 *   #4f6158 / #eef4f1 5,9:1 ; bord des champs #857a63 / blanc 4,1:1 ;
 * - guide de lecture : cadre et variables → sur-titres, titres, liens →
 *   boutons → ouverture (texte, carrousel, commandes) → repères → cartes de parcours → horaires et
 *   lieux → agenda → derniers billets → la Compagnie → adhésion et jauge →
 *   contact → classes de largeur → mise en page large (deux colonnes dès
 *   46rem ; horaires, agenda et contact à leurs proportions finales dès
 *   60rem ; troisième billet dès 80rem) → animations réduites.
 *====================================================*/

/* ───────────────────────────────────────────────────────────────────────────
   Cadre de la page et variables
   ───────────────────────────────────────────────────────────────────────── */
.home-page {
    --home-deep:      #0f3d27;   /* vert profond */
    --home-deep-soft: #1d5a3c;   /* fond d’attente de la photo d’ouverture */
    --home-green:     #146c43;   /* liens, focus */
    --home-parchment: #f7f3ea;
    --home-mist:      #dfe8e1;   /* texte secondaire sur vert profond */
    --home-rule:      #ece5d6;   /* filets et bords de carte */
    --home-gold:      #e3c27a;   /* uniquement sur vert profond */
    --home-bronze:    #7a5a12;   /* sur-titres sur fond clair */
    --home-soft:      #eef4f1;   /* vert pâle */
    --home-text:      #1f2a24;
    --home-text-warm: #3a342b;   /* texte sur parchemin */
    --home-muted:     #4a4338;
    --home-radius:    16px;
    --home-pad-x:     clamp(1.25rem, 4.5vw, 3rem);
    --home-pad-y:     clamp(2.5rem, 5vw, 3.5rem);

    container: home / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: calc(100% - 2rem);
    margin: .5rem auto;
    color: var(--home-text);
    font-size: 1.125rem;          /* 18 px */
    line-height: 1.6;
    /* Chiffres « alignés » : ceux de Cormorant, elzéviriens par défaut,
       se lisent mal dans les titres et les repères. */
    font-variant-numeric: lining-nums;
}
/* <main> reçoit le focus du lien d’évitement : pas de cadre autour de la page */
.home-page:focus { outline: none; }

.home-sheet {
    overflow: hidden;             /* bandes rognées aux coins arrondis */
    border-radius: var(--home-radius);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.home-section { padding: var(--home-pad-y) var(--home-pad-x); }
.home-band {
    background: var(--home-parchment);
    color: var(--home-text-warm);
}
.home-page p { margin: 0; }
.home-facts,
.home-events,
.home-news,
.home-company__values {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Sur-titres, titres de section, liens
   ───────────────────────────────────────────────────────────────────────── */
.home-section__head { margin-bottom: 1.75rem; }

.home-page .home-eyebrow {
    margin-bottom: .375rem;
    font-size: .8125rem;          /* 13 px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--home-bronze);
}
.home-page .home-eyebrow--small { margin-bottom: 0; font-size: .75rem; }
.home-hero .home-eyebrow,
.home-company .home-eyebrow { color: var(--home-gold); }

/* Neutralise « section h2 » centré de styles.css */
.home-page .home-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem);   /* 40 px */
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    color: var(--home-deep);
}

/* Aucun lien bleu Bootstrap : vert des autres pages */
.home-page a:not(.home-cta) {
    color: var(--home-green);
    font-weight: 600;
}
.home-page a:not(.home-cta):hover { color: var(--home-deep); }
.home-page a:focus-visible,
.home-page button:focus-visible,
.home-schedule__table:focus-visible {
    outline: 3px solid var(--home-green);
    outline-offset: 2px;
    box-shadow: none;
}
.home-hero a:focus-visible,
.home-company a:focus-visible { outline-color: var(--home-gold); }

/* Lien fléché : cible tactile de 44 px (une ligne de 29 px et ses marges) ;
   en bloc de texte, pour que la flèche suive le dernier mot à la césure */
.home-page a.home-more {
    display: inline-block;
    align-self: flex-start;
    padding-block: .5rem;
    font-weight: 700;
    text-decoration: none;
}
.home-page a.home-more:hover { text-decoration: underline; text-underline-offset: .15em; }

.home-page .home-noscript { font-size: 1rem; color: var(--home-muted); }

/* ───────────────────────────────────────────────────────────────────────────
   Boutons : vert profond par défaut, doré et contour sur vert profond
   ───────────────────────────────────────────────────────────────────────── */
.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;             /* 48 px */
    padding: .25rem 1.5rem;
    border: 1px solid var(--home-deep);
    border-radius: 8px;
    background: var(--home-deep);
    color: var(--home-parchment);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.home-cta:hover {
    border-color: var(--home-green);
    background: var(--home-green);
    color: #fff;
}
.home-cta--gold {
    border-color: var(--home-gold);
    background: var(--home-gold);
    color: var(--home-deep);
}
.home-cta--gold:hover {
    border-color: var(--home-parchment);
    background: var(--home-parchment);
    color: var(--home-deep);
}
.home-cta--ghost {
    border-color: var(--home-mist);
    background: transparent;
    color: var(--home-parchment);
}
.home-cta--ghost:hover {
    border-color: var(--home-parchment);
    background: rgba(247, 243, 234, .14);
    color: var(--home-parchment);
}
.home-cta--large {
    min-height: 3.25rem;          /* 52 px */
    padding-inline: 1.75rem;
    font-size: 1.1875rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   Ouverture : texte, puis photos (empilés ; texte sur la photo en mise en page large)
   ───────────────────────────────────────────────────────────────────────── */
.home-hero {
    display: grid;
    overflow: hidden;
    border-radius: var(--home-radius);
    background: var(--home-deep);
    color: var(--home-parchment);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.home-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    min-width: 0;
    padding: clamp(2rem, 5vw, 3.5rem) var(--home-pad-x);
}
.home-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.25rem + 3.6vw, 4rem);      /* 64 px */
    font-weight: 700;
    line-height: 1.02;
}
.home-hero__lead {
    max-width: 30em;
    font-size: clamp(1.125rem, 1rem + .6vw, 1.3125rem);   /* 21 px */
    line-height: 1.5;
    color: var(--home-mist);
}
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .5rem;
}
.home-hero__motto {
    padding-top: .5rem;
    font-family: var(--font-display);
    font-size: 1.375rem;          /* 22 px */
    font-style: italic;
    font-weight: 600;
    color: var(--home-mist);
}
/* Carrousel de photos. Empilé : la photo, sous le texte, se fond par le
   haut dans le vert profond au lieu d’être coupée net. */
.home-hero__media {
    position: relative;
    aspect-ratio: 2 / 1;
    background: var(--home-deep-soft);
}
.home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--home-deep) 0,
        rgba(15, 61, 39, 0) 45%
    );
}
/* Cadrage « right » : le sujet est dans la moitié droite de l’image, un
   peu au-dessus du milieu ; c’est ce côté qu’on garde quand la carte est
   plus étroite ou plus basse que l’image. */
.home-hero__img--right { object-position: 85% 40%; }
.home-carousel {
    position: absolute;
    inset: 0;
}
.home-carousel .carousel-inner,
.home-carousel .carousel-item { height: 100%; }
.home-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Commandes : pastilles vert profond, en bas à droite de la photo */
.home-carousel .carousel-control-prev,
.home-carousel .carousel-control-next {
    top: auto;
    bottom: .75rem;
    left: auto;
    width: 2.75rem;
    height: 2.75rem;              /* cible tactile de 44 px */
    opacity: 1;
}
.home-carousel .carousel-control-prev { right: 3.75rem; }
.home-carousel .carousel-control-next { right: .75rem; }
.home-carousel .carousel-control-prev-icon,
.home-carousel .carousel-control-next-icon {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(247, 243, 234, .55);
    border-radius: 50%;
    background-color: var(--home-deep);
    background-size: 50%;
}
.home-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.home-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--home-green);
}
.home-page .home-carousel .carousel-control-prev:focus-visible,
.home-page .home-carousel .carousel-control-next:focus-visible {
    border-radius: 50%;
    outline: 3px solid #fff;
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--home-deep);
}
/* Indicateurs : traits parchemin cerclés de vert profond, visibles sur
   les zones claires des photos ; en bas à droite, avant les commandes */
.home-carousel .carousel-indicators {
    right: 7.25rem;
    left: auto;
    margin: 0 0 1.625rem;
}
.home-carousel .carousel-indicators [data-bs-target] {
    width: 1.75rem;
    height: .375rem;
    border: 0;
    border-radius: 3px;
    background-color: var(--home-parchment);
    box-shadow: 0 0 0 2px rgba(15, 61, 39, .8);
    opacity: .7;
}
.home-carousel .carousel-indicators .active { opacity: 1; }
.home-page .home-carousel .carousel-indicators [data-bs-target]:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--home-deep);
}

/* ───────────────────────────────────────────────────────────────────────────
   Repères — quatre chiffres
   ───────────────────────────────────────────────────────────────────────── */
.home-section--facts {
    padding-block: 2rem;
    border-bottom: 1px solid var(--home-rule);
}
.home-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.home-fact__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);      /* 52 px */
    font-weight: 700;
    line-height: 1;
    color: var(--home-deep);
}
.home-fact__label {
    display: block;
    margin-top: .375rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--home-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   Par où commencer ? — cartes de parcours
   ───────────────────────────────────────────────────────────────────────── */
.home-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}
.home-card,
.home-post {
    position: relative;           /* zone du stretched-link */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--home-rule);
    border-radius: var(--home-radius);
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.home-card:hover,
.home-post:hover {
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}
/* Focus du lien : on entoure toute la carte (zone réellement cliquable) */
.home-card:has(a:focus-visible),
.home-post:has(a:focus-visible),
.home-event:has(a:focus-visible) {
    outline: 3px solid var(--home-green);
    outline-offset: 2px;
}
.home-page .home-card a:focus-visible,
.home-page .home-post a:focus-visible,
.home-page .home-event a:focus-visible { outline: none; }

/* Cadre 3/2, cadré vers le haut : les images, carrées, y gardent leurs
   deux tiers supérieurs, où sont les visages. */
.home-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--home-soft);
}
.home-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
.home-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
}
.home-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;           /* 28 px */
    font-weight: 700;
    line-height: 1.1;
    color: var(--home-deep);
}
.home-page a.home-card__more { margin-top: auto; }
.home-card:hover .home-card__more { text-decoration: underline; text-underline-offset: .15em; }

/* ───────────────────────────────────────────────────────────────────────────
   Quand et où tirer — tableau des créneaux, cartes de lieu
   ───────────────────────────────────────────────────────────────────────── */
.home-schedule,
.home-schedule__venues {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}
.home-schedule__venues { gap: 1rem; }
/* Cadre du tableau : c’est lui qui défile, pas la page */
.home-schedule__table {
    overflow-x: auto;
    border: 1px solid var(--home-rule);
    border-radius: var(--home-radius);
    background: #fff;
}
.home-schedule__table table {
    width: 100%;
    min-width: 28.75rem;          /* 460 px */
    border-collapse: collapse;
    font-size: 1.0625rem;         /* 17 px */
}
.home-schedule__table th,
.home-schedule__table td {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--home-rule);
    text-align: left;
}
.home-schedule__table thead th {
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--home-muted);
}
.home-schedule__table tbody tr:last-child > * { border-bottom: 0; }

.home-venue {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--home-rule);
    border-radius: var(--home-radius);
    background: #fff;
}
.home-venue__title {
    margin: 0 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;            /* 24 px */
    font-weight: 700;
    line-height: 1.15;
    color: var(--home-deep);
}
.home-venue p { font-size: 1rem; }

/* ───────────────────────────────────────────────────────────────────────────
   À venir — liste remplie par home-competitions.js
   ───────────────────────────────────────────────────────────────────────── */
.home-life {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}
.home-life__agenda,
.home-life__news {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.home-events {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.home-event {
    position: relative;           /* zone cliquable du titre */
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--home-rule);
    border-radius: var(--home-radius);
}
/* Pastille de date : jour doré sur vert profond */
.home-event__date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    min-height: 4rem;
    padding: .375rem .5rem;
    border-radius: 12px;
    background: var(--home-deep);
    color: var(--home-parchment);
    line-height: 1;
}
.home-event__day {
    font-family: var(--font-display);
    font-size: 1.75rem;           /* 28 px */
    font-weight: 700;
    color: var(--home-gold);
}
.home-event__month,
.home-event__year {
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.home-event__body { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.home-page a.home-event__title {
    font-weight: 700;
    color: var(--home-text);
    text-decoration: none;
}
.home-page a.home-event__title::after {   /* tout l’encadré est cliquable */
    content: "";
    position: absolute;
    inset: 0;
}
.home-event:hover .home-event__title { text-decoration: underline; text-underline-offset: .15em; }
.home-event__place,
.home-event__until {
    display: block;
    font-size: 1rem;
    color: var(--home-muted);
}
/* Dernier rendez-vous passé : encadré en pointillés, pastille pâle (pas de
   doré hors du vert profond), mention explicite */
.home-event--past { border-style: dashed; border-color: #c9bfa8; }
.home-event--past .home-event__date { background: var(--home-soft); color: #4f6158; }
.home-event--past .home-event__day { color: var(--home-deep); }
.home-event__flag {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--home-bronze);
}
.home-events__note {
    font-size: 1rem;
    color: var(--home-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   Dernières actualités — cartes remplies par home-news.js
   ───────────────────────────────────────────────────────────────────────── */
.home-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
/* Le troisième billet n’apparaît que s’il tient sur la rangée (≥ 80rem) */
.home-news__item:nth-child(n + 3) { display: none; }
.home-news__note { font-size: 1rem; color: var(--home-muted); }
.home-post { height: 100%; }
/* Illustration : la photo entière, jamais rognée, quel que soit son
   format ; les marges qu’elle laisse sont remplies par la même photo,
   agrandie et floutée. */
.home-post__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;          /* proche du 4/3 courant des photos */
    overflow: hidden;
    background: var(--home-soft);
    color: #4f6158;               /* pictogramme d’un billet sans image */
    font-size: 2rem;
}
.home-post__backdrop {
    position: absolute;
    inset: -12%;                  /* déborde : bords du flou hors cadre */
    width: 124%;
    height: 124%;
    object-fit: cover;
    filter: blur(16px);
    opacity: .75;
}
.home-post__img {
    position: relative;           /* au-dessus du fond flouté */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-post__body { padding: 1rem 1.25rem 1.25rem; }
.home-page .home-post__type {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--home-bronze);
}
.home-post__title {
    margin: .25rem 0 .375rem;
    font-size: 1.1875rem;         /* 19 px */
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.home-page .home-post__title a {
    font-weight: 700;
    color: var(--home-text);
    text-decoration: none;
}
.home-post__more {
    font-size: 1rem;
    font-weight: 700;
    color: var(--home-green);
}
.home-post:hover .home-post__more { text-decoration: underline; text-underline-offset: .15em; }

/* ───────────────────────────────────────────────────────────────────────────
   La Compagnie — bande vert profond
   ───────────────────────────────────────────────────────────────────────── */
.home-company {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: clamp(3rem, 5.5vw, 4rem);
    background: var(--home-deep);
    color: var(--home-parchment);
}
.home-company__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.home-page .home-company__motto {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.4rem + 2.9vw, 3.5rem);    /* 56 px */
    font-style: italic;
    font-weight: 600;
    line-height: 1.05;
    text-align: left;
}
.home-company p { color: var(--home-mist); }
.home-page .home-company a.home-more { color: var(--home-gold); }
.home-page .home-company a.home-more:hover { color: var(--home-parchment); }
.home-company__value {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(247, 243, 234, .22);
}
.home-company__value:last-child { border-bottom: 1px solid rgba(247, 243, 234, .22); }
.home-company__value-title {
    margin: 0 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.625rem;          /* 26 px */
    font-weight: 700;
    line-height: 1.15;
}
.home-company__value p { font-size: 1.0625rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Adhésion — phrase, jauge fine, bouton
   ───────────────────────────────────────────────────────────────────────── */
.home-join {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}
.home-join__text {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    min-width: 0;
}
.home-gauge {
    height: .875rem;              /* 14 px */
    overflow: hidden;
    border-radius: 7px;
    background: var(--home-rule);
}
.home-gauge__bar {
    height: 100%;
    border-radius: 7px;
    background: var(--home-deep);
}

/* ───────────────────────────────────────────────────────────────────────────
   Contact — coordonnées, formulaire dans une carte blanche
   ───────────────────────────────────────────────────────────────────────── */
.home-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
}
.home-contact__info {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    min-width: 0;
}
/* Adresse seule sur sa ligne : cible tactile de 44 px */
.home-contact__info a {
    display: inline-block;
    padding-block: .5rem;
    overflow-wrap: anywhere;
}
.home-contact__form {
    min-width: 0;
    padding: 1.75rem;
    border: 1px solid var(--home-rule);
    border-radius: var(--home-radius);
    background: #fff;
    color: var(--home-text);
}
.home-contact__form .form-label { font-size: 1rem; font-weight: 600; }
.home-contact__form .form-control {
    min-height: 2.875rem;         /* 46 px */
    border-color: #857a63;
    border-radius: 8px;
    font-size: 1.0625rem;
}
.home-contact__form .form-control:focus {
    border-color: var(--home-green);
    box-shadow: 0 0 0 .2rem rgba(20, 108, 67, .3);
}
/* Message d’état posé par contact-form.js (.text-center) : aligné à gauche */
.home-contact__form #statusMsg { text-align: left !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Classes de largeur .w-0 à .w-100 (jauge : templates/main/adhesion.php)
   ───────────────────────────────────────────────────────────────────────── */
.w-0 { width: 0% !important; } .w-1 { width: 1% !important; } .w-2 { width: 2% !important; } .w-3 { width: 3% !important; } .w-4 { width: 4% !important; }
.w-5 { width: 5% !important; } .w-6 { width: 6% !important; } .w-7 { width: 7% !important; } .w-8 { width: 8% !important; } .w-9 { width: 9% !important; }
.w-10 { width: 10% !important; } .w-11 { width: 11% !important; } .w-12 { width: 12% !important; } .w-13 { width: 13% !important; } .w-14 { width: 14% !important; }
.w-15 { width: 15% !important; } .w-16 { width: 16% !important; } .w-17 { width: 17% !important; } .w-18 { width: 18% !important; } .w-19 { width: 19% !important; }
.w-20 { width: 20% !important; } .w-21 { width: 21% !important; } .w-22 { width: 22% !important; } .w-23 { width: 23% !important; } .w-24 { width: 24% !important; }
.w-25 { width: 25% !important; } .w-26 { width: 26% !important; } .w-27 { width: 27% !important; } .w-28 { width: 28% !important; } .w-29 { width: 29% !important; }
.w-30 { width: 30% !important; } .w-31 { width: 31% !important; } .w-32 { width: 32% !important; } .w-33 { width: 33% !important; } .w-34 { width: 34% !important; }
.w-35 { width: 35% !important; } .w-36 { width: 36% !important; } .w-37 { width: 37% !important; } .w-38 { width: 38% !important; } .w-39 { width: 39% !important; }
.w-40 { width: 40% !important; } .w-41 { width: 41% !important; } .w-42 { width: 42% !important; } .w-43 { width: 43% !important; } .w-44 { width: 44% !important; }
.w-45 { width: 45% !important; } .w-46 { width: 46% !important; } .w-47 { width: 47% !important; } .w-48 { width: 48% !important; } .w-49 { width: 49% !important; }
.w-50 { width: 50% !important; } .w-51 { width: 51% !important; } .w-52 { width: 52% !important; } .w-53 { width: 53% !important; } .w-54 { width: 54% !important; }
.w-55 { width: 55% !important; } .w-56 { width: 56% !important; } .w-57 { width: 57% !important; } .w-58 { width: 58% !important; } .w-59 { width: 59% !important; }
.w-60 { width: 60% !important; } .w-61 { width: 61% !important; } .w-62 { width: 62% !important; } .w-63 { width: 63% !important; } .w-64 { width: 64% !important; }
.w-65 { width: 65% !important; } .w-66 { width: 66% !important; } .w-67 { width: 67% !important; } .w-68 { width: 68% !important; } .w-69 { width: 69% !important; }
.w-70 { width: 70% !important; } .w-71 { width: 71% !important; } .w-72 { width: 72% !important; } .w-73 { width: 73% !important; } .w-74 { width: 74% !important; }
.w-75 { width: 75% !important; } .w-76 { width: 76% !important; } .w-77 { width: 77% !important; } .w-78 { width: 78% !important; } .w-79 { width: 79% !important; }
.w-80 { width: 80% !important; } .w-81 { width: 81% !important; } .w-82 { width: 82% !important; } .w-83 { width: 83% !important; } .w-84 { width: 84% !important; }
.w-85 { width: 85% !important; } .w-86 { width: 86% !important; } .w-87 { width: 87% !important; } .w-88 { width: 88% !important; } .w-89 { width: 89% !important; }
.w-90 { width: 90% !important; } .w-91 { width: 91% !important; } .w-92 { width: 92% !important; } .w-93 { width: 93% !important; } .w-94 { width: 94% !important; }
.w-95 { width: 95% !important; } .w-96 { width: 96% !important; } .w-97 { width: 97% !important; } .w-98 { width: 98% !important; } .w-99 { width: 99% !important; }
.w-100 { width: 100% !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Mise en page large : colonnes côte à côte dès 46rem de contenu
   (fenêtre de 768 px sans barre latérale)
   ───────────────────────────────────────────────────────────────────────── */
@container home (min-width: 30rem) {
    .home-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container home (min-width: 46rem) {
    /* La photo occupe toute la carte ; le texte est posé dessus, sur une
       colonne bornée à 34rem pour que la photo garde la place restante
       sur les grands écrans. */
    .home-hero {
        --home-hero-text: min(50%, 34rem);
        position: relative;
        grid-template-columns: minmax(0, var(--home-hero-text));
        min-height: 27.5rem;
    }
    .home-hero__text { position: relative; z-index: 1; }
    .home-hero__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
    /* Ombrage à gauche, calé sur la colonne de texte : la photo reste
       devinée dessous (97 % puis 88 % de vert profond jusqu’au bord du
       texte), puis l’ombrage s’efface en 10rem. */
    .home-hero__media::after {
        background: linear-gradient(
            to right,
            rgba(15, 61, 39, .97) 0,
            rgba(15, 61, 39, .88) calc(var(--home-hero-text) - 2rem),
            rgba(15, 61, 39, 0) calc(var(--home-hero-text) + 10rem)
        );
    }

    .home-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Trois cartes serrées : titre et marges réduits jusqu’à 60rem */
    .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .home-card__body { padding: 1rem; }
    .home-card__title { font-size: 1.375rem; }

    /* Lieux côte à côte sous le tableau, qui garde toute la largeur */
    .home-schedule__venues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-schedule__venues .home-more { grid-column: 1 / -1; }

    .home-company { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .home-join { grid-template-columns: minmax(0, 1fr) auto; }
    .home-contact { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@container home (min-width: 60rem) {
    .home-cards { gap: 1.5rem; }
    .home-card__body { padding: 1.5rem; }
    .home-card__title { font-size: 1.75rem; }

    .home-schedule { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    .home-schedule__venues { grid-template-columns: minmax(0, 1fr); }
    .home-life { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .home-join { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .home-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@container home (min-width: 80rem) {
    .home-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-news__item:nth-child(3) { display: block; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Préférences utilisateur : animations réduites
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .home-cta,
    .home-card,
    .home-post,
    .home-carousel .carousel-item { transition: none; }
    .home-card:hover,
    .home-post:hover { transform: none; }
}