/* ============================================================
   page-blocks.css — HABILLAGE DES BLOCS DE CONTENU
   ------------------------------------------------------------
   Un bloc — présentation, bandeau texte et image, galerie,
   bouton, cadre vidéo, liste de fichiers, formulaire d'inscri-
   ption — se pose sur N'IMPORTE QUELLE page. Son habillage doit
   donc vivre dans UNE feuille chargée par toutes, et jamais
   dans celle d'une famille de pages.

   ⚠️ C'EST LE DÉFAUT QUE CETTE FEUILLE FERME. Les règles des
   galeries et des bandeaux ne vivaient que dans inscriptions.css,
   celles du cadre vidéo et des sous-titres que dans page.css,
   celles de la présentation et des liens de fichiers que dans
   patrons.css. Un même bloc s'affichait donc correctement sur
   une page et SANS AUCUN STYLE sur une autre — sans erreur, et
   seulement sur certaines pages. On ne s'en aperçoit qu'en
   regardant.

   ⚠️ ET C'EST UNE SEULE FEUILLE, PAS UNE PAR SORTE DE BLOC.
   Trois raisons : les règles sont courtes et seraient noyées
   sous les cartouches ; plusieurs sortes PARTAGENT des classes,
   qu'il faudrait alors recopier — et deux copies divergent
   toujours ; enfin, à spécificité égale, la dernière règle
   écrite gagne, or l'ordre de chargement changerait d'une page
   à l'autre selon les blocs présents. Un défaut de ce genre ne
   se voit que sur une page précise, et on le cherche longtemps.

   Le chargement conditionnel garde son sens pour ce qui est
   LOURD et RARE : le lecteur vidéo, sa façade et le lecteur
   audio gardent leurs feuilles, appelées seulement quand le
   bloc correspondant est présent. Vingt lignes de galerie, non.

   CHARGÉE   : côté serveur, sur toutes les pages de contenu.
   DÉPEND DE : base.css (variables, cartes, boutons, titres).
   SOURCE    : page.css, patrons.css et inscriptions.css, sans
               qu'une seule valeur soit changée.
   NB        : le préfixe des classes rappelle la feuille dont
               elles viennent. Il sera rallié au vocabulaire
               commun quand le reste du moteur le sera.
   ============================================================ */


/* ------------------------------------------------------------
   CADRE VIDÉO (façade YouTube et lecteur maison)
   Ancien inline : position:relative; width:100%;
   aspect-ratio:16/9; overflow:hidden; border-radius:0.75rem;
   ------------------------------------------------------------ */
.atelier-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.75rem;
}

/* ------------------------------------------------------------
   BADGE « Bonus »
   Ancien inline : pastille dorée en haut à droite du cadre.
   ------------------------------------------------------------ */
.atelier-bonus-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #F4A12E, #FFD36A);
    color: #2b1a0f;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   SECTIONS D'UNE PAGE DE CONTENU
   ------------------------------------------------------------
   Trois classes qui remplacent les utilitaires hérités d'un
   ancien cadre de mise en page. Valeurs reprises à l'identique.
   ============================================================ */

/* Une section de contenu, séparée de la suivante. Même écart que
   les cartes de la feuille de base. */
.page-section{
    margin-bottom: 1.5rem;
}

/* Sous-titre d'une section : plus discret que le titre principal,
   même alignement. */
.page-subtitle{
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--brand-muted);
    text-align: center;
}

/* Corps de texte écrit depuis l'administration : interligne aéré,
   ce sont souvent de longs paragraphes. */
.page-prose{
    color: var(--brand-ink);
    line-height: 1.625;
    text-align: center;
}

/* Variante espacée, quand le texte suit un média. */
.page-prose--spaced{
    margin-top: 1.5rem;
}


/* Le vocabulaire des contenus saisis (.contenu-avertissement,
   .contenu-astuce) et la marge des paragraphes de contenu vivent dans
   base.css : une page quelconque du portail peut avoir besoin d'un
   avertissement, et cette feuille-ci n'est chargée que sur les pages de
   contenu. */

/* Rangée centrée sous un bloc, pour un bouton isolé.
   La marge est une variante : selon ce qui précède, le bouton suit
   immédiatement (sous un titre) ou se détache (sous un texte). */
.page-action{
    text-align: center;
}

.page-action--spaced{
    margin-top: 1.5rem;
}


/* =====================================================================
   patrons.css — PAGES PATRON & ATELIER
   ---------------------------------------------------------------------
   RÔLE      : styles spécifiques aux pages de présentation d'un patron
               (mise en page texte/image) et aux blocs de liens vers les
               fichiers à télécharger.
   CHARGÉE   : sur les pages de présentation de patron et d'atelier.
   DÉPEND DE : base.css (variables, cartes, titres, boutons...).
   SOURCE    : sections « PRÉSENTATION PATRON » et « BLOCS LIENS FICHIERS »
               de l'ancien main.css, reprises à l'identique (responsive inclus).
   NB        : la vignette vidéo YouTube (.yt-facade) N'EST PAS ici :
               elle est propre aux pages qui intègrent une vidéo (accueil
               et atelier) et vit dans video-facade.css.
   ⚠️ COULEURS : plus aucun code écrit en dur. Les blocs de fichiers étaient
               habillés en bleu — le seul endroit du site dans ce cas — et
               leurs textes en gris. Tout passe par les variables du socle.
   ===================================================================== */


/* =========================
   PRÉSENTATION PATRON (mise en page texte / image)
   ========================= */

.presentation-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

.presentation-text{
    min-width: 0;
}

.presentation-media{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.presentation-image{
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

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

    .presentation-media{
        justify-content: flex-start;
    }
}

/* Corps du texte de présentation, écrit depuis l'administration.
   Interligne aéré : ce sont souvent de longs paragraphes. */
.presentation-prose{
    color: var(--brand-ink);
    line-height: 1.625;
}


/* =========================
   BLOCS LIENS FICHIERS (liens de téléchargement + badge version)
   ========================= */

.wax-links{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 8px;
}

/* Une carte de fichier reprend le fond crème de l'onglet actif : c'est le
   ton d'arrière-plan du site, et non plus un bleu qui ne se retrouvait
   nulle part ailleurs. */
.wax-file-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--brand-brown);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* ⚠️ La couleur est RÉPÉTÉE au survol, sinon la carte entière virerait à
   l'orange : c'est un <a>, et la charte des liens du socle le veut ainsi.
   Ici le survol se signale par l'élévation, l'ombre et le filet orange. */
.wax-file-link:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(18, 18, 18, 0.08);
    border-color: rgba(244, 161, 46, 0.35);
    color: var(--brand-brown);
}

.wax-file-ico{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--brand-brown);
    flex: 0 0 auto;
}

/* Logo de réseau social : il garde sa couleur d'origine.
   Même principe que les liens du pied de page, où .social-btn.fb porte
   déjà ce bleu. Le brun de la règle ci-dessus vaut pour les icônes de
   fichiers, qui n'appartiennent à personne. */
.wax-file-ico.fb{
    color: #1877F2;
}

.wax-file-title{
    font-weight: 800;
    line-height: 1.25;
    color: var(--brand-brown);
}

/* .download-version-badge est REMONTÉE dans base.css : la même pastille
   sert les cartes d'accès, qui ne chargent pas cette feuille. Elle y est
   posée à cheval sur le bord haut de la carte, et non plus dans le flux
   du texte. */


/* =========================
   RESPONSIVE — blocs liens fichiers
   ========================= */

@media (max-width: 640px){
    .wax-file-link{
        padding: 12px 14px;
    }

    .wax-file-ico{
        width: 32px;
        height: 32px;
    }
}


.signup-hero {
    position: relative;
    margin-bottom: 1.5rem;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 5rem 1.5rem;
    border-radius: 24px;

    overflow: hidden;
}

/* overlay pour lisibilité texte */
.signup-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.signup-hero > * {
    position: relative;
    z-index: 1;
}


/* =========================
   PAGE INSCRIPTION — FORMULAIRE HERO PUBLIC
   ========================= */

.signup-form input[type="text"],
.signup-form input[type="email"] {
    width: 100%;
}


/* =========================
   PAGE INSCRIPTION — SECTIONS DYNAMIQUES
   ========================= */

.signup-dynamic-section {
    overflow: hidden;
}

.signup-dynamic-title {
    margin: 0 0 1.3rem;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 800;
}

.signup-dynamic-layout {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.signup-dynamic-section--image-right .signup-dynamic-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
}

.signup-dynamic-section--image-left .signup-dynamic-layout {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
}

.signup-dynamic-section--image-left .signup-dynamic-text {
    order: 2;
}

.signup-dynamic-section--image-left .signup-dynamic-media {
    order: 1;
    justify-content: flex-start;
}

.signup-dynamic-section--image-right .signup-dynamic-text {
    order: 1;
}

.signup-dynamic-section--image-right .signup-dynamic-media {
    order: 2;
    justify-content: flex-end;
}

.signup-dynamic-text {
    min-width: 0;
    line-height: 1.7;
    font-size: 1.05rem;
}

.signup-dynamic-text p:first-child {
    margin-top: 0;
}

.signup-dynamic-text p:last-child {
    margin-bottom: 0;
}

.signup-dynamic-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-dynamic-image {
    display: block;

    width: 100%;
    max-width: 340px;
    height: auto;

    object-fit: contain;

    border: 4px solid var(--brand-primary);
    border-radius: 18px;

    box-shadow: 0 14px 30px rgba(18, 18, 18, 0.12);
}

.signup-dynamic-text--cta {
    max-width: 1360px;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .signup-dynamic-layout {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .signup-dynamic-section--image-left .signup-dynamic-text,
    .signup-dynamic-section--image-right .signup-dynamic-text {
        order: 1 !important;
    }

    .signup-dynamic-section--image-left .signup-dynamic-media,
    .signup-dynamic-section--image-right .signup-dynamic-media {
        order: 2 !important;
    }

    .signup-dynamic-media {
        justify-content: center;
    }

    .signup-dynamic-image {
        max-width: 100%;
    }
}


/* =========================
   PAGE INSCRIPTION — GALERIE
   ========================= */

.signup-gallery-intro {
    margin-bottom: 1.4rem;
}

.signup-gallery {
    display: grid;
    gap: 1.2rem;
}

.signup-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signup-gallery--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.signup-gallery-item {
    margin: 0;
}

/* Chaque image garde SA hauteur. Une hauteur imposée obligeait à recadrer,
   et une photo verticale y perdait son bas — le vêtement passait hors du
   cadre. Le bas de la grille devient irrégulier quand les proportions
   diffèrent : c'est le prix à payer pour ne jamais couper une photo.
   Le bloc adaptatif, en fin de feuille, faisait déjà ce choix. */
.signup-gallery-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    background: #ffffff;

    border: 4px solid var(--brand-primary);
    border-radius: 18px;

    box-shadow: 0 14px 30px rgba(18, 18, 18, 0.12);
}

@media (max-width: 760px) {
    .signup-gallery,
    .signup-gallery--2,
    .signup-gallery--3,
    .signup-gallery--4 {
        grid-template-columns: 1fr;
    }

    .signup-gallery-image {
        height: auto;
        object-fit: contain;
        object-position: center;
    }
}


/* =========================
   PAGE INSCRIPTION — CTA
   ========================= */

.signup-cta-button-row {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

.signup-cta-button {
    min-width: 230px;
    justify-content: center;
}

@media (max-width: 560px) {
    .signup-cta-button {
        width: 100%;
        min-width: 0;
    }
}


/* ============================================================
   PAGE D'INSCRIPTION PUBLIQUE
   ---------------------------------------------------------------
   Déplacé depuis le bloc de style qui était écrit en dur dans la page.

   TROIS VALEURS SONT PILOTÉES DEPUIS L'ADMINISTRATION, via des
   variables CSS posées sur le conteneur :
     --signup-text-color      couleur du texte de consentement
     --signup-button-color    couleur d'accent des cases à cocher
     --signup-button-justify  alignement du bouton d'inscription

   Chaque var() porte une valeur de repli : si la variable n'est pas
   posée, la page reste correcte.
   ============================================================ */

.signup-hero-content {
    max-width: 1360px;
    margin: -1.2rem auto 0;
    text-align: center;
}

.signup-hero-title {
    margin: 0 0 0.7rem;
    line-height: 1.12;
    font-weight: 800;
}

.signup-subtitle {
    margin: 0 auto 1.4rem;
    max-width: 620px;
    line-height: 1.45;
    font-weight: 600;
}

.signup-form {
    width: min(100%, 460px);
    margin: 2.1rem auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.signup-form-group {
    margin-bottom: 0.75rem;
}

.signup-form-input {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border-radius: 13px;
    font-size: 1rem;
    line-height: 1.2;
}

.signup-consent--public {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 460px;
    margin: 0.85rem auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--signup-text-color, #ffffff);
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: left;
}

.signup-consent--public input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    accent-color: var(--signup-button-color, #f4a12e);
}

/* Le texte de consentement se saisit en HTML : il porte des paragraphes.
   Sans cette remise à zéro, la marge que le navigateur donne au premier
   paragraphe pousse tout le texte SOUS la case à cocher, qui reste en haut. */
.signup-consent--public p {
    margin: 0;
}

.signup-consent--public p + p {
    margin-top: 0.5rem;
}

.signup-button-row {
    display: flex;
    justify-content: var(--signup-button-justify, center);
    margin-top: 1.6rem;
}

.signup-button-row .btn {
    min-width: 230px;
    justify-content: center;
}

.signup-hero-visual {
    position: absolute;
    z-index: 1;
    bottom: 0;
    max-height: 88%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
}

.signup-hero-visual--left {
    left: 0;
}

.signup-hero-visual--right {
    right: 0;
}

.signup-hero-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 760px) {
    .signup-hero-visual {
        display: none;
    }
}

@media (max-width: 560px) {
    .signup-form,
    .signup-consent--public {
        width: 100%;
        max-width: 100%;
    }

    .signup-button-row .btn {
        width: 100%;
        min-width: 0;
    }
}