/* ==========================================================================
   PHASE 2 - LAYOUT ENGINEERING
   Géométrie de la maquette (proportions, espacements, alignements) construite
   avec Flexbox. La palette réelle est définie en Phase 3 ci-dessous.
   ========================================================================== */

/* ==========================================================================
   PHASE 3 - UI PIXEL-PERFECT IMPLEMENTATION
   Direction artistique réelle, mesurée précisément sur la maquette : palette
   chaude et neutre, typographie "Inter", aucune ombre ni dégradé (la
   maquette elle-même est entièrement plate - aucun effet à reproduire ici).
   ========================================================================== */

/* ==========================================================================
   PHASE 5 - MOTION DESIGN & MICRO-INTERACTIONS
   Ce composant n'a ni bouton, ni lien, ni carte cliquable : c'est une simple
   bande d'information. Deux mouvements seulement, chacun justifié :
     1. Une révélation discrète au scroll (l'utilisateur perçoit la section
        "arriver" plutôt que de la voir apparaître brutalement au chargement).
     2. Une micro-interaction très légère sur l'icône au survol - pas d'ombre
        ni d'élévation façon "carte cliquable", pour ne jamais laisser croire
        que ces badges sont interactifs alors qu'ils ne le sont pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET MINIMAL
   Strictement ce qu'il faut pour que les calculs de boîte soient prévisibles,
   sans imposer de choix esthétique.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   Toutes les valeurs mesurées sur la maquette, regroupées ici pour rester
   faciles à ajuster sans toucher aux règles de composition/de style
   ci-dessous. Sous-groupes : géométrie (Phase 2) puis palette/typographie
   (Phase 3).
   -------------------------------------------------------------------------- */
.reassurance {
    /* Conteneur
       Fluide entre mobile et desktop : les valeurs "max" ci-dessous sont
       exactement celles validées en Phase 2/3 (aucun changement ≥ 1440px). */
    --reassurance-max-width: 1280px;
    --reassurance-padding-inline: clamp(1rem, 4vw, 1.5rem);
    --reassurance-padding-block: clamp(3rem, 6vw, 5rem);

    /* Colonne */
    --reassurance-item-padding-inline: clamp(0.75rem, 3vw, 1.5rem);

    /* Icône - le minimum (44px) respecte la cible tactile Apple/Google (44×44px) */
    --reassurance-icon-size: clamp(2.75rem, 6vw, 3.75rem);

    /* Rythme vertical interne à une colonne */
    --reassurance-gap-icon-title: clamp(0.75rem, 2vw, 1rem);
    --reassurance-gap-title-subtitle: clamp(0.5rem, 1.5vw, 0.75rem);

    /* Rythme horizontal (utilisé uniquement en layout "ligne" ≤ 575px) */
    --reassurance-gap-icon-content: clamp(0.75rem, 3vw, 1.25rem);

    /* Rythme entre badges empilés (grille tablette / liste mobile) */
    --reassurance-row-gap: clamp(1.5rem, 5vw, 2.5rem);
    --reassurance-column-gap: clamp(1.5rem, 4vw, 2.5rem);

    /* Typographie de travail (taille uniquement, non finale) */
    --reassurance-title-font-size: clamp(1rem, 1.6vw, 1.125rem);
    --reassurance-subtitle-font-size: clamp(0.8125rem, 1.2vw, 0.875rem);

    /* ---- PHASE 3 - Palette réelle (mesurée sur la maquette) ---- */
    --color-border-divider: color-mix(in srgb, var(--color-wood) 20%, var(--color-cream)); /* séparateurs verticaux */

    /* ---- PHASE 3 - Typographie ---- */

    /* ---- PHASE 5 - Motion ---- */
    --motion-ease: cubic-bezier(0.16, 0.8, 0.24, 1); /* ease-out doux, cohérent sur toute la page */
    --motion-duration-hover: 200ms;    /* micro-interactions (survol icône) */
    --motion-duration-reveal: 500ms;   /* apparition au scroll */
    --motion-stagger-step: 80ms;       /* décalage entre badges successifs */
}

/* --------------------------------------------------------------------------
   3. SECTION & CONTENEUR
   La section est full-width ; le conteneur centre le contenu et porte les
   marges latérales + la respiration verticale de la bande.
   -------------------------------------------------------------------------- */
.reassurance {
    width: 100%;
    background-color: var(--color-kraft); /* bande de contraste : seul fond kraft de l'accueil */
    background-image: var(--texture-fibres); /* fibres de bois très discrètes */
    background-blend-mode: multiply;
}

.reassurance__container {
    max-width: var(--reassurance-max-width);
    margin-inline: auto;
    padding-block: var(--reassurance-padding-block);
    padding-inline: var(--reassurance-padding-inline);
}

/* --------------------------------------------------------------------------
   4. LISTE (LIGNE DES 4 COLONNES)
   Flexbox comme système principal, conformément à la demande. Les colonnes
   se partagent l'espace à parts strictement égales (flex: 1 1 0).
   -------------------------------------------------------------------------- */
.reassurance__list {
    display: flex;
    align-items: stretch;   /* permet aux séparateurs de s'étirer sur toute la hauteur de la ligne */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   5. ITEM (COLONNE)
   Chaque colonne centre son contenu horizontalement (icône au-dessus du
   texte), et porte le séparateur vertical sous forme de bordure gauche :
   pas de <div> décoratif superflu, la géométrie suffit.
   -------------------------------------------------------------------------- */
.reassurance__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--reassurance-item-padding-inline);
    border-left: 1px solid var(--color-border-divider);
}

/* Pas de séparateur avant la toute première colonne */
.reassurance__item:first-child {
    border-left: none;
}

/* --------------------------------------------------------------------------
   6. ICÔNE
   Cercle de taille fixe, contenu centré. Le fond neutre ne représente que la
   forme du repère visuel (cf. note en tête de fichier).
   -------------------------------------------------------------------------- */
.reassurance__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--reassurance-icon-size);
    height: var(--reassurance-icon-size);
    margin-bottom: var(--reassurance-gap-icon-title);
    border-radius: 50%;
    background-color: var(--color-paper);
}

.reassurance__icon {
    width: 50%;
    height: 50%;
    color: var(--color-wood); /* pilote le "currentColor" du SVG inline */
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   7. BLOC DE TEXTE (TITRE + SOUS-TITRE)
   Le gap gère l'espacement vertical entre titre et sous-titre : pas de
   marges "magiques" à dupliquer sur chaque élément.
   -------------------------------------------------------------------------- */
.reassurance__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--reassurance-gap-title-subtitle);
}

.reassurance__title {
    margin: 0;
    font-size: var(--reassurance-title-font-size);
    font-weight: 700;   /* nécessaire pour conserver la hiérarchie visuelle titre / sous-titre */
    line-height: 1.3;
    color: var(--color-ink);
}

.reassurance__subtitle {
    margin: 0;
    font-size: var(--reassurance-subtitle-font-size);
    line-height: 1.4;
    color: var(--color-wood);
}

/* ==========================================================================
   PHASE 4 - RESPONSIVE EXPERIENCE DESIGN
   Philosophie : la plupart des écrans (≥ 576px, du petit laptop au très
   grand écran) sont déjà couverts par les tokens fluides (clamp) définis
   plus haut - aucune media query n'est nécessaire pour ça, conformément à
   la consigne d'éviter les valeurs figées quand une solution fluide suffit.
   Seuls 2 points de rupture correspondent à un vrai changement de
   composition (pas juste "plus petit") :
     - ≤ 767px : la ligne de 4 colonnes devient une grille 2×2.
     - ≤ 575px : chaque badge devient une rangée horizontale (icône à
       gauche, texte à gauche), le motif de liste natif du mobile plutôt
       qu'une colonne desktop rétrécie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. TRÈS GRAND ÉCRAN (≥ 1600px)
   Le conteneur peut respirer davantage sans que les colonnes ne deviennent
   trop larges (le texte resterait sinon perdu dans l'espace).
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .reassurance__container {
        max-width: 1440px;
    }
}

/* --------------------------------------------------------------------------
   10. TABLETTE - GRILLE 2×2 (≤ 767px)
   À 768px, 4 colonnes côte à côte deviennent trop étroites : les titres les
   plus longs ("Humidité contrôlée") menacent de passer à la ligne et les
   séparateurs verticaux finissent collés au texte. Plutôt que de comprimer
   davantage, on redessine la composition en grille 2×2 : chaque badge
   retrouve assez de largeur pour respirer, et les séparateurs sont adaptés
   en conséquence (vertical entre les 2 colonnes, horizontal entre les 2
   lignes) au lieu de disparaître complètement.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .reassurance__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--reassurance-row-gap);
        column-gap: var(--reassurance-column-gap);
    }

    .reassurance__item {
        /* Le séparateur gauche universel ne fait plus sens en grille :
           on le retire puis on le redistribue ci-dessous. */
        border-left: none;
        padding-inline: 0;
    }

    /* Séparateur vertical entre les 2 colonnes de chaque ligne */
    .reassurance__item:nth-child(2n) {
        border-left: 1px solid var(--color-border-divider);
        padding-left: var(--reassurance-column-gap);
    }

    .reassurance__item:nth-child(2n-1) {
        padding-right: var(--reassurance-column-gap);
    }

    /* Séparateur horizontal entre les 2 lignes */
    .reassurance__item:nth-child(n+3) {
        border-top: 1px solid var(--color-border-divider);
        padding-top: calc(var(--reassurance-row-gap) / 2);
    }
}

/* --------------------------------------------------------------------------
   11. MOBILE - LISTE HORIZONTALE (≤ 575px)
   Sous 576px, empiler 4 blocs "icône au-dessus du texte" en colonne produit
   une liste très haute, avec un texte centré dont la longueur de ligne varie
   d'un badge à l'autre (inconfortable à scanner). Le motif natif d'une liste
   mobile - icône à gauche, texte aligné à gauche, une ligne par garantie -
   est plus rapide à lire et plus confortable au pouce : c'est un vrai
   redesign de la section, pas un simple empilement mécanique.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .reassurance__list {
        display: flex;
        flex-direction: column;
    }

    /* `:nth-child(n)` (et non `.reassurance__item` seul) : la grille 2×2 du bloc précédent pose
       padding et filet vertical via `:nth-child(2n)`, `:nth-child(2n-1)` et `:nth-child(n+3)`,
       de poids supérieur. Sans cette parité, les items 2 et 4 restaient décalés de 18 px
       et les icônes ne s'alignaient pas en liste. */
    .reassurance__item,
    .reassurance__item:nth-child(n) {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: var(--reassurance-gap-icon-content);
        width: 100%;
        padding-inline: 0;
        padding-block: 1.25rem;
        border-left: none;
    }

    /* Séparateur horizontal entre badges empilés, aucun avant le premier */
    .reassurance__item:not(:first-child) {
        border-top: 1px solid var(--color-border-divider);
    }

    .reassurance__icon-wrapper {
        flex-shrink: 0;   /* l'icône garde sa taille, le texte prend le reste */
        margin-bottom: 0; /* l'espacement est géré par le gap horizontal ci-dessus */
    }

    .reassurance__content {
        align-items: flex-start;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   12. MICRO-INTERACTION - ICÔNE AU SURVOL
   Effet volontairement minimal (couleur + très léger scale), sans ombre ni
   translation : ce n'est pas une carte cliquable, juste un signe de vie.
   `color-mix()` fonce le disque en restant dans la palette existante (pas de
   nouvelle couleur arbitraire à maintenir).
   Limité à `hover: hover` + `pointer: fine` pour éviter tout hover "collé"
   sur les écrans tactiles (un doigt qui tape ne doit pas figer l'état).
   -------------------------------------------------------------------------- */
.reassurance__icon-wrapper {
    transition:
        background-color var(--motion-duration-hover) var(--motion-ease),
        transform var(--motion-duration-hover) var(--motion-ease);
}

.reassurance__icon {
    transition: color var(--motion-duration-hover) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .reassurance__item:hover .reassurance__icon-wrapper {
        background-color: color-mix(in srgb, var(--color-paper) 80%, var(--color-wood) 20%);
        transform: scale(1.06);
    }

    .reassurance__item:hover .reassurance__icon {
        color: var(--color-ink);
    }
}

/* --------------------------------------------------------------------------
   13. RÉVÉLATION AU SCROLL
   État "avant révélation" appliqué UNIQUEMENT quand `script.js` a confirmé
   pouvoir le lever ensuite (classe .js-motion) : sans JS, ou si l'API
   IntersectionObserver est indisponible, ces règles ne s'appliquent jamais
   et le contenu reste visible par défaut (voir règles de base plus haut).
   Décalage en cascade (stagger) via nth-child, dans le sens de lecture.
   -------------------------------------------------------------------------- */
.js-motion .reassurance__item {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity var(--motion-duration-reveal) var(--motion-ease),
        transform var(--motion-duration-reveal) var(--motion-ease);
}

.js-motion.is-visible .reassurance__item {
    opacity: 1;
    transform: translateY(0);
}

.js-motion .reassurance__item:nth-child(1) { transition-delay: calc(var(--motion-stagger-step) * 0); }
.js-motion .reassurance__item:nth-child(2) { transition-delay: calc(var(--motion-stagger-step) * 1); }
.js-motion .reassurance__item:nth-child(3) { transition-delay: calc(var(--motion-stagger-step) * 2); }
.js-motion .reassurance__item:nth-child(4) { transition-delay: calc(var(--motion-stagger-step) * 3); }

/* --------------------------------------------------------------------------
   14. PRÉFÉRENCE UTILISATEUR - MOUVEMENT RÉDUIT
   `script.js` n'active déjà rien si prefers-reduced-motion est actif, mais
   cette règle CSS agit en filet de sécurité (ex. préférence changée après
   coup) : toutes les transitions/animations de ce fichier sont neutralisées
   d'un coup, et tout élément resterait visible même si .js-motion était
   malgré tout présent.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reassurance__icon-wrapper,
    .reassurance__icon,
    .js-motion .reassurance__item {
        transition: none !important;
    }

    .js-motion .reassurance__item {
        opacity: 1 !important;
        transform: none !important;
    }

    .reassurance__item:hover .reassurance__icon-wrapper {
        transform: none !important;
    }
}