/*
 * Page « Notre histoire ».
 * Reprend la maquette images/maquette_notre_histoire.png.
 *
 * Beaucoup de blocs sont ceux de l'accueil — bannière, réassurance, atelier,
 * infolettre — et ne sont pas redéfinis ici : seuls les écarts le sont.
 * Les jetons viennent de fondations.css : aucune couleur en dur.
 */

/* — Bannière — */

/*
 * Le titre tient sur deux mots, pas sur trois lignes comme à l'accueil : il
 * peut donc être plus grand. Le reste de la bannière est inchangé.
 */
.banniere--histoire .banniere__titre {
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    line-height: 1.02;
    color: var(--bordeaux);
    margin-bottom: var(--espace-2);
}

.banniere--histoire .banniere__coeur {
    width: 0.62em;
    height: 0.62em;
    margin-left: 0.25em;
    color: var(--rose-vif);
    vertical-align: 0.1em;
}

.banniere--histoire .banniere__introduction { margin-bottom: var(--espace-3); }

/*
 * Sous-titre manuscrit. La seconde ligne est décalée vers la droite, comme sur
 * la maquette : c'est ce décalage qui donne l'air écrit à la main.
 */
.histoire__signature {
    margin: 0 0 var(--espace-2);
    font-family: var(--police-manuscrite);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.35;
    color: var(--encre);
}
.histoire__signature-decalee { display: inline-block; margin-left: 2.2em; }

/* Le filet court qui sépare la signature du paragraphe. */
.histoire__trait {
    display: block;
    width: 64px;
    height: 2px;
    margin-bottom: var(--espace-3);
    /* `--rose-pale` disparaissait dans le crème du fond : il faut le rose des
       titres, qui est le trait de la maquette. */
    background: var(--rose);
    opacity: 0.55;
}

/* — Les cœurs, trois variantes selon leur rôle — */

.histoire__coeur-plein { color: var(--rose-vif); }
.histoire__coeur-contour { color: var(--rose-vif); }
.histoire__coeur-fin { color: var(--encre); }

/* — « Une passion devenue réalité » — */

/*
 * La section reprend `.atelier` de l'accueil, mais avec trois colonnes au lieu
 * de quatre : la citation n'est plus un bloc à part, elle est posée sous le
 * dessin de la maison.
 */
#passion {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
}

.atelier__dessin { position: relative; }

.histoire__legende {
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.4;
    color: var(--encre);
    transform: rotate(-4deg);
    transform-origin: left center;
}

/* — Le mot de Galou — */

.mot-galou {
    padding-block: var(--espace-6);
    background: var(--rose-tres-pale);
}

/* Une lettre : colonne étroite, texte aéré, signature manuscrite. */
.mot-galou__lettre {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--espace-5) var(--espace-6);
    background: var(--blanc-chaud);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-carte);
    color: var(--texte);
    font-size: var(--taille-base);
    line-height: 1.85;
}
.mot-galou__lettre::before {
    content: "“";
    position: absolute;
    top: var(--espace-1);
    left: var(--espace-3);
    font-family: var(--police-titre);
    font-size: 5rem;
    line-height: 1;
    color: var(--rose-pale);
    pointer-events: none;
}
.mot-galou__lettre p { margin: 0 0 var(--espace-2); }
.mot-galou__fin {
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    color: var(--bordeaux-clair);
}
.mot-galou__signature {
    font-family: var(--police-signature);
    font-size: 3rem;
    line-height: 1;
    color: var(--bordeaux-vif);
    text-align: right;
}

@media (max-width: 700px) {
    .mot-galou__lettre { padding: var(--espace-4) var(--espace-3); }
}

/* — Nos valeurs — */

.valeurs {
    position: relative;
    isolation: isolate;
    padding-block: var(--espace-6);
    background: var(--creme);
    overflow: hidden;
}

/*
 * La photo de feuilles occupe la droite et s'efface vers la gauche. Sans ce
 * dégradé, elle passerait sous la quatrième carte et son texte deviendrait
 * illisible — le même problème que sur la bannière d'accueil.
 */
.valeurs__fond {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    /* 38 % : les quatre cartes occupent les 72 % de gauche, et le dégradé doit
       être entièrement fini avant la dernière d'entre elles. Au-delà, le texte
       de « Responsables » se posait sur les feuilles. */
    width: 38%;
    height: 100%;
    object-fit: cover;
    /* Dégradé long : une transition courte laisse un bord vertical visible en
       plein milieu de la section. */
    mask-image: linear-gradient(to right, transparent, #000 62%);
}

.valeurs__titre {
    margin-bottom: var(--espace-3);
    text-align: left;
}

.valeurs__liste {
    display: grid;
    /* Quatre cartes, mais seulement sur les deux tiers gauche : le tiers droit
       appartient au post-it et aux feuilles. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espace-2);
    width: 72%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.valeur {
    padding: var(--espace-3);
    background: var(--blanc-chaud);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-carte);
}

.valeur__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--espace-2);
    color: var(--bordeaux-vif);
}
.valeur__icone svg { width: 26px; height: 26px; }
/* Deux icônes sur quatre sont posées sur une pastille rose, comme sur la
   maquette. C'est un rythme visuel, pas une différence de sens. */
.valeur__icone--pastille {
    background: var(--rose-pale);
    border-radius: var(--rayon-rond);
}

.valeur__titre {
    margin: 0 0 var(--espace-1);
    font-family: var(--police-corps);
    font-size: var(--taille-s);
    font-weight: 700;
    color: var(--texte);
}

.valeur__texte {
    margin: 0;
    font-size: var(--taille-xs);
    line-height: 1.6;
    color: var(--texte-doux);
}

/*
 * Le post-it, posé sur les feuilles. Il est légèrement incliné et débordant,
 * comme un papier vraiment déposé là.
 */
.postit {
    position: absolute;
    right: 4%;
    top: 50%;
    z-index: 1;
    max-width: 260px;
    margin: 0;
    padding: var(--espace-4) var(--espace-3);
    transform: translateY(-50%) rotate(-5deg);
    background: #f3e6cd;
    border-radius: 2px;
    box-shadow: var(--ombre-flottante);
    font-family: var(--police-manuscrite);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    color: var(--encre);
}

/* — « Notre atelier en Bourgogne » — */

.atelier--histoire {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.55fr);
    background: var(--creme);
}

.atelier--histoire .atelier__image img { aspect-ratio: 1 / 0.62; }

.atelier__dessin--signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-1);
}

.histoire__branche {
    width: 92px;
    height: auto;
    color: var(--texte-doux);
    opacity: 0.75;
}

.histoire__signature-valeurs {
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.45;
    color: var(--bordeaux);
    text-align: center;
    transform: rotate(-6deg);
}

/* — Merci d'être ici — */

.merci {
    padding-block: var(--espace-5);
    background: var(--creme);
    text-align: center;
}

.merci__contenu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espace-4);
}

.merci__titre {
    grid-column: 2;
    margin: 0 0 var(--espace-2);
    font-family: var(--police-titre);
    font-size: var(--taille-xl);
    font-weight: 700;
    color: var(--bordeaux);
}

.merci__texte {
    grid-column: 2;
    margin: 0;
    font-size: var(--taille-s);
    line-height: 1.8;
    color: var(--texte-doux);
}

.merci__branche {
    width: 110px;
    height: auto;
    color: var(--texte-doux);
    opacity: 0.75;
}
.merci__branche--gauche { grid-column: 1; grid-row: 1 / span 2; }
/* La branche de droite est le miroir de celle de gauche : un seul dessin. */
.merci__branche--droite { grid-column: 3; grid-row: 1 / span 2; transform: scaleX(-1); }

/* — Sous 1024 px — */

@media (max-width: 1024px) {
    /*
     * Les deux sections en bandeau passent en colonne. Le dessin et la
     * signature se placent alors sous le texte, centrés.
     */
    #passion,
    .atelier--histoire { grid-template-columns: minmax(0, 1fr); }

    /*
     * En colonne, le dessin de la maison occupait toute la largeur : 700 px de
     * croquis pour trois lignes de citation, et une page qui n'avance plus.
     * On le ramène à une taille de vignette, et la citation passe dessous.
     */
    #passion .atelier__dessin {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--espace-1);
    }
    #passion .atelier__dessin img { max-width: 300px; }
    .histoire__legende {
        text-align: center;
        transform: rotate(-2deg);
        transform-origin: center;
    }

    .valeurs__fond { width: 100%; opacity: 0.35; mask-image: none; }
    .valeurs__liste { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Le post-it ne peut plus flotter à droite : il devient un bloc, à la
       suite des cartes, sans quoi il les recouvrirait. */
    .postit {
        position: static;
        max-width: none;
        margin: var(--espace-3) auto 0;
        transform: rotate(-2deg);
        text-align: center;
    }
}

@media (max-width: 700px) {
    .valeurs__liste { grid-template-columns: minmax(0, 1fr); }

    .merci__contenu { grid-template-columns: minmax(0, 1fr); }
    .merci__titre,
    .merci__texte { grid-column: 1; }
    /* Les branches n'apportent rien sur un écran étroit et volent la place
       du texte : on les retire plutôt que de les réduire. */
    .merci__branche { display: none; }

    .histoire__signature-decalee { margin-left: 1em; }
}