/* ══════════════════════════════════════════════════════════════════════════
   Accueil des sites de vente aux particuliers (Framesi, Paul Mitchell)
   Lot A1 (2026-10-07), transposé de la maquette design-ux (accueil/css/accueil.css).
   Chargé après drm.css, drm-v9.css et drm-v9-fiche.css (accordéon .dr-faq),
   par site/accueil-marque.html.twig seulement.

   Règles tenues :
   - aucun jeton nouveau hors --dr-accueil-* (calculés depuis --dr-accent) ;
   - mêmes rayons (16 / 20), mêmes durées (.14 / .25 / .28 / .5 s), même courbe
     (--dr-ease-menu), même police (Inter), mêmes boutons (ds-btn) ;
   - espacements verticaux : 24 / 56 / 88 (--ds-rythme-*), cartes 24, grille 20 ;
     haut de page sous l'en-tête : --ds-rythme-section ;
   - tout est scopé body.ds-page .dr-accueil, rien n'atteint une autre page.
   ══════════════════════════════════════════════════════════════════════════ */

body.ds-page .dr-accueil {
    --dr-accueil-teinte: color-mix(in srgb, var(--dr-accent) 8%, #ffffff);
    --dr-accueil-teinte-forte: color-mix(in srgb, var(--dr-accent) 14%, #ffffff);
    background: var(--dr-fond);
    color: var(--dr-texte);
    /* Retour Martin 08/10 (lot A2) : le carrousel collait à l'en-tête (24 px, 16 en mobile).
       Même respiration qu'entre deux sections : 56 px, 40 en mobile (jeton mobile de drm.css). */
    padding: var(--ds-rythme-section) 0 var(--ds-rythme-chapitre);
}
body.ds-page .dr-accueil__conteneur {
    max-width: var(--dr-conteneur);
    margin: 0 auto;
    padding: 0 32px;
}
body.ds-page .dr-accueil__section { margin-top: var(--ds-rythme-section); }
body.ds-page .dr-accueil__section:first-child { margin-top: 0; }

/* Titres : H1 40, H2 28, H3 18. Seule échelle plus grande que le reste du front,
   réservée à la page d'accueil (écran d'entrée, pas écran de travail). */
body.ds-page .dr-accueil h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.021em;
    font-weight: 600;
    max-width: 22ch;
    text-wrap: balance;
}
body.ds-page .dr-accueil h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.014em;
    font-weight: 600;
    text-wrap: balance;
}
body.ds-page .dr-accueil h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.ds-page .dr-accueil p { margin: 0; }
body.ds-page .dr-accueil .dr-accueil__lead {
    margin-top: 16px;
    max-width: 64ch;
    font-size: 18px;
    line-height: 1.55;
    color: var(--dr-texte-2);
}
body.ds-page .dr-accueil .dr-accueil__lead p + p { margin-top: 12px; }
body.ds-page .dr-accueil__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
body.ds-page .dr-accueil__tete a {
    color: var(--dr-texte);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--dr-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    white-space: nowrap;
}
body.ds-page .dr-accueil__tete a:hover { text-decoration-color: currentColor; }
body.ds-page .dr-accueil p.dr-accueil__sous-titre { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--dr-texte-2); max-width: 64ch; }

/* ── Carrousel principal ──────────────────────────────────────────────────── */
body.ds-page .dr-hero {
    position: relative;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-xl);
    overflow: hidden;
}
body.ds-page .dr-slide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 440px; }
body.ds-page .dr-slide[hidden] { display: none; }
body.ds-page .dr-slide--entree { animation: dr-slide-in .4s var(--dr-ease-menu) both; }
@keyframes dr-slide-in { from { opacity: 0; } to { opacity: 1; } }

body.ds-page .dr-slide__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 56px 48px 96px 56px;
}
body.ds-page .dr-slide__titre {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.021em;
    font-weight: 600;
    color: var(--dr-texte);
    text-wrap: balance;
}
body.ds-page .dr-slide__resume { font-size: 17px; line-height: 1.55; color: var(--dr-texte-2); max-width: 40ch; }
body.ds-page .dr-slide__cta { margin-top: 8px; }
body.ds-page .dr-slide__cta .ds-btn { align-self: flex-start; }

/* Le visuel porte uniquement l'image (aucun texte dedans) : le titre, le résumé et
   le bouton sont du HTML à côté, donc lisibles, indexables, contrastés. */
body.ds-page .dr-slide__visuel { position: relative; background: var(--dr-accueil-teinte); overflow: hidden; }
body.ds-page .dr-slide__visuel picture,
body.ds-page .dr-slide__visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; }
body.ds-page .dr-slide__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Commandes du carrousel : dans la colonne texte, sous le bouton. */
body.ds-page .dr-hero__commandes {
    position: absolute;
    left: 56px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.ds-page .dr-hero__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dr-bordure);
    border-radius: 50%;
    background: var(--dr-blanc);
    color: var(--dr-texte);
    cursor: pointer;
    transition: background-color var(--dr-duree-etat), border-color var(--dr-duree-etat);
}
body.ds-page .dr-hero__btn:hover { background: var(--dr-hover); }
body.ds-page .dr-hero__btn:active { background: var(--dr-actif); }
body.ds-page .dr-hero__btn:focus-visible,
body.ds-page .dr-hero__point:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-hero__points { display: flex; align-items: center; margin-left: 8px; }
body.ds-page .dr-hero__point {
    width: 28px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}
body.ds-page .dr-hero__point::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #b8b8be;
    transition: width var(--dr-duree-composant) var(--dr-ease-menu), background-color var(--dr-duree-etat);
}
body.ds-page .dr-hero__point[aria-current="true"]::before { width: 24px; background: var(--dr-accent); }
body.ds-page .dr-hero__compteur { margin-left: 8px; font-size: 14px; color: var(--dr-texte-2); font-variant-numeric: tabular-nums; }

/* ── Cartes besoins ───────────────────────────────────────────────────────── */
body.ds-page .dr-besoins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.ds-page .dr-besoin {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    transition: box-shadow var(--dr-duree-composant), transform var(--dr-duree-composant);
}
body.ds-page .dr-besoin:hover { box-shadow: var(--dr-ombre-carte); transform: translateY(-2px); }
body.ds-page .dr-besoin:has(a:focus-visible) { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-besoin h3 a { color: var(--dr-texte); text-decoration: none; }
body.ds-page .dr-besoin h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* carte entière cliquable, comme la carte produit */
body.ds-page .dr-besoin h3 a:focus-visible { outline: none; }
body.ds-page .dr-besoin p { font-size: 15px; line-height: 1.55; color: var(--dr-texte-2); }
body.ds-page .dr-besoin__fleche { margin-top: auto; padding-top: 8px; color: var(--dr-accent-texte); }

/* ── Cartes gammes ────────────────────────────────────────────────────────── */
body.ds-page .dr-gammes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.ds-page .dr-gamme {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    overflow: hidden;
    transition: box-shadow var(--dr-duree-composant), transform var(--dr-duree-composant);
}
body.ds-page .dr-gamme:hover { box-shadow: var(--dr-ombre-carte); transform: translateY(-2px); }
body.ds-page .dr-gamme:has(a:focus-visible) { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-gamme__media { position: relative; aspect-ratio: 16 / 10; background: var(--dr-accueil-teinte); overflow: hidden; }
body.ds-page .dr-gamme__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ds-page .dr-gamme__corps { display: flex; flex-direction: column; gap: 8px; padding: 24px; flex: 1; }
body.ds-page .dr-gamme__corps p { font-size: 15px; line-height: 1.6; color: var(--dr-texte-2); }
body.ds-page .dr-gamme h3 a { color: var(--dr-texte); text-decoration: none; }
body.ds-page .dr-gamme h3 a::after { content: ""; position: absolute; inset: 0; }
body.ds-page .dr-gamme h3 a:focus-visible { outline: none; }
body.ds-page .dr-gamme__lien { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--dr-texte); }
body.ds-page .dr-gamme__lien .dr-icone { color: var(--dr-accent-texte); }

/* ── Produits du moment ───────────────────────────────────────────────────── */
body.ds-page .dr-accueil__produits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* L'entrée des cartes (dr-carte-in) attend celle de leur section dès que l'apparition est armée
   (.js-reveal, posée dans le head) : elle n'est plus consommée pendant le chargement du script.
   Sans JavaScript, la classe n'existe pas et les cartes s'affichent normalement. Si ds-accueil.js
   ne s'exécute pas (pas de .js-reveal-pret), les cartes jouent leur entrée avec le filet des
   sections, après 2,5 s. */
html.js-reveal body.ds-page .dr-accueil [data-reveal]:not(.is-in) .ds-carte.dr-carte { animation-play-state: paused; }
html.js-reveal:not(.js-reveal-pret) body.ds-page .dr-accueil [data-reveal] .ds-carte.dr-carte { animation: dr-carte-in-secours var(--dr-duree-scene) ease-out 2.5s both; }
/* Copie de dr-carte-in sous un autre nom : quand le script se pose, l'animation change de nom et
   repart de zéro (en pause jusqu'à l'entrée de la section) au lieu de reprendre le filet entamé. */
@keyframes dr-carte-in-secours {
    0% { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
body.ds-page .dr-accueil__suite { display: flex; justify-content: center; margin-top: 32px; }

/* ── Panneaux blancs (savoir-faire, pourquoi, FAQ, contact) ───────────────── */
body.ds-page .dr-panneau-accueil {
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-xl);
    padding: 48px;
}
body.ds-page .dr-savoir { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
body.ds-page .dr-savoir__texte { display: flex; flex-direction: column; gap: 16px; }
body.ds-page .dr-savoir__texte p { font-size: 16px; line-height: 1.7; color: var(--dr-texte-2); max-width: 62ch; }
body.ds-page .dr-savoir__texte a { color: var(--dr-texte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dr-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.ds-page .dr-savoir__visuel { position: relative; aspect-ratio: 4 / 3; border-radius: var(--dr-r-lg); background: var(--dr-accueil-teinte); overflow: hidden; }
body.ds-page .dr-savoir__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

body.ds-page .dr-pourquoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
body.ds-page .dr-pourquoi__item { display: flex; flex-direction: column; gap: 8px; }
body.ds-page .dr-pourquoi__pastille {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dr-accueil-teinte);
    color: var(--dr-accent-texte);
    margin-bottom: 8px;
}
body.ds-page .dr-pourquoi__item p { font-size: 15px; line-height: 1.6; color: var(--dr-texte-2); }

body.ds-page .dr-faq-accueil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
body.ds-page .dr-faq-accueil .dr-faq h2 { display: none; }   /* le H2 est dans la colonne de gauche */
body.ds-page .dr-faq-accueil .dr-faq__item:first-child { border-top: 1px solid var(--dr-sep); }
body.ds-page .dr-faq-accueil .dr-faq__tete { padding: 24px 0; font-size: 18px; }

body.ds-page .dr-contact-accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
body.ds-page .dr-contact-accueil .ds-contact-grid { margin-top: 24px; }

/* ── Apparition au défilement ─────────────────────────────────────────────── */
/* Vocabulaire repris de la fiche (dr-fiche-reveal : 6 px, .3 s) et de la carte
   (dr-carte-in : .5 s). Amélioration progressive : sans JavaScript, la classe
   .js-reveal n'existe pas et tout est visible. */
html.js-reveal body.ds-page .dr-accueil [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .4s ease-out, transform .4s var(--dr-ease-menu); }
html.js-reveal body.ds-page .dr-accueil [data-reveal].is-in { opacity: 1; transform: none; }
/* Filet : si ds-accueil.js ne s'exécute pas (il pose .js-reveal-pret), la section apparaît
   quand même après 2,5 s. Le transform ne change pas la place de la section : aucun décalage
   de mise en page. */
html.js-reveal:not(.js-reveal-pret) body.ds-page .dr-accueil [data-reveal] { animation: dr-reveal-secours 0s 2.5s forwards; }
@keyframes dr-reveal-secours { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    html.js-reveal body.ds-page .dr-accueil [data-reveal] { opacity: 1; transform: none; transition: none; animation: none; }
    body.ds-page .dr-slide--entree { animation: none; }
    body.ds-page .dr-besoin,
    body.ds-page .dr-gamme,
    body.ds-page .dr-hero__point::before { transition: none; }
    body.ds-page .dr-besoin:hover,
    body.ds-page .dr-gamme:hover { transform: none; }
    body.ds-page .dr-accueil__produits .ds-carte.dr-carte { animation: none; }
}

/* ── Tablette ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    body.ds-page .dr-accueil__produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ds-page .dr-pourquoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ds-page .dr-savoir,
    body.ds-page .dr-faq-accueil,
    body.ds-page .dr-contact-accueil { grid-template-columns: 1fr; gap: 32px; }
    body.ds-page .dr-gammes,
    body.ds-page .dr-besoins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    body.ds-page .dr-accueil__conteneur { padding: 0 16px; }
    body.ds-page .dr-accueil h1 { font-size: 30px; }
    body.ds-page .dr-accueil h2 { font-size: 24px; }
    body.ds-page .dr-accueil .dr-accueil__lead { font-size: 16px; }
    body.ds-page .dr-accueil__tete { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }

    body.ds-page .dr-hero { border-radius: var(--dr-r-lg); }
    body.ds-page .dr-slide { grid-template-columns: 1fr; min-height: 0; }
    body.ds-page .dr-slide__visuel { order: -1; aspect-ratio: 4 / 3; }
    body.ds-page .dr-slide__texte { padding: 24px 20px 88px; gap: 12px; }
    body.ds-page .dr-slide__titre { font-size: 28px; }
    body.ds-page .dr-slide__resume { font-size: 16px; }
    body.ds-page .dr-slide__cta .ds-btn { width: 100%; }
    body.ds-page .dr-hero__commandes { left: 20px; right: 20px; bottom: 20px; }
    body.ds-page .dr-hero__compteur { margin-left: auto; }

    body.ds-page .dr-besoins,
    body.ds-page .dr-gammes { grid-template-columns: 1fr; gap: 12px; }
    body.ds-page .dr-besoin { padding: 20px; }
    body.ds-page .dr-gamme { flex-direction: row; }
    body.ds-page .dr-gamme__media { flex: 0 0 38%; aspect-ratio: auto; }
    body.ds-page .dr-gamme__corps { padding: 20px; }
    body.ds-page .dr-gamme__corps p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    body.ds-page .dr-accueil__produits { gap: 12px; }
    body.ds-page .dr-accueil__suite .ds-btn { width: 100%; }
    body.ds-page .dr-panneau-accueil { padding: 24px 20px; border-radius: var(--dr-r-lg); }
    body.ds-page .dr-pourquoi { grid-template-columns: 1fr; gap: 24px; }
    body.ds-page .dr-pourquoi__item { flex-direction: row; flex-wrap: wrap; column-gap: 16px; align-items: center; }
    body.ds-page .dr-pourquoi__item p { flex-basis: 100%; }
    body.ds-page .dr-pourquoi__pastille { margin-bottom: 0; }
    body.ds-page .dr-faq-accueil .dr-faq__tete { font-size: 17px; padding: 20px 0; }
    body.ds-page .ds-contact-grid { grid-template-columns: 1fr; }
}

body.ds-page .dr-accueil__intro-cta { margin-top: 24px; }
body.ds-page .dr-hero__commandes[hidden] { display: none; }
body.ds-page .dr-pourquoi { margin-top: 32px; }
body.ds-page .dr-pourquoi__texte,
body.ds-page .dr-pourquoi__texte p { font-size: 15px; line-height: 1.6; color: var(--dr-texte-2); }
body.ds-page .dr-savoir__texte p + p { margin-top: 12px; }
body.ds-page .dr-contact-accueil__liste { margin: 0; }
body.ds-page .dr-hero__btn[hidden] { display: none; }