/* D.F.L CONSTRUCTION — intro « Briques » + hero vivant (titre mot par mot, parallaxe, poussière). Préfixe di-.
   Écrit le 14/10/2026 sur le moule V3 commun (intro.css). À charger APRÈS /assets/eco/css/site.css, accueil seulement.
   Tout ce qui est caché ici l'est par une classe posée par intro.js (ou par le rideau html.di-pre, qui se retire tout seul) :
   sans JS ou en mouvement réduit, le site reste identique. Transform / opacity / clip-path uniquement.

   CHOIX : rideau CLAIR (blanc cassé #faf8f5, le fond doux du site). Le logo D.F.L est un dessin noir au trait : il se lit à son
   maximum sur clair (noir sur #faf8f5 = 16,08:1) et le rideau se fond dans l'accueil blanc qui apparaît dessous, sans flash sombre.
   Briques : bleu #1f3c88 (3 tons) et une brique sur cinq en terre cuite sobre (#a85d44), joints = le fond clair.
   LOGO : logo-intro.webp = logo V1 détouré (fond blanc -> transparent, traits noirs conservés, recadré), 370 x 385 px, jamais agrandi
   au-delà de cette taille (largeur d'affichage max 340 px).

   CHRONOLOGIE DE L'INTRO (ms, depuis le chargement) — durée ≈ 1,5 s, passable au clic / toucher / touche, une seule fois par session :
        0   écran blanc cassé
       60   rang du BAS : 4 briques tombent une à une (280 ms chacune, petit rebond), décalées de 30 ms
      200   rang du MILIEU, en quinconce (demi-brique, 3 briques, demi-brique) : pose de bas en haut, +140 ms par rang
      340   rang du HAUT (4 briques)
      700   le mur s'OUVRE : briques de gauche vers la gauche, briques de droite vers la droite (320 ms, elles s'effacent) ;
            en même temps le logo s'ouvre depuis le milieu (clip-path, 380 ms)
     1150   le rideau s'ouvre en deux (haut vers le haut, bas vers le bas, 350 ms), le logo s'efface, les mots du titre démarrent
     1500   fin de l'ouverture, retrait de l'overlay. Garde-fous : rideau CSS retiré seul à 2 600 ms (html.di-pre), overlay JS retiré à
            2 600 ms, titre jamais caché au-delà de 3 600 ms (animation CSS diShow). */

:root{--di-fond:#faf8f5;--di-ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- 0. Rideau clair dès le premier affichage (évite le flash du hero avant l'intro) ----------
   Classe di-pre posée par un petit script en ligne dans le <head> de l'accueil (seulement si l'intro va se jouer : accueil, pas de
   mouvement réduit, pas déjà vue dans la session). Trois sorties de secours : intro.js retire la classe, l'animation le fait
   disparaître seule au bout de 2,6 s, et sans JS la classe n'est jamais posée. */
@media (prefers-reduced-motion:no-preference){
  html.di-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--di-fond);pointer-events:none;animation:diCover .01s linear 2.6s forwards}
}
@media (scripting:none){html.di-pre::after{display:none}}
@keyframes diCover{to{opacity:0;visibility:hidden}}

/* ---------- 1. INTRO « Briques » ---------- */
#di-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;background:var(--di-fond);contain:strict}
#di-intro.di-rideau{background:transparent}
.di-half{position:absolute;left:0;right:0;height:50%;background:var(--di-fond);will-change:transform;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.di-top{top:0}
.di-bot{bottom:0}
.di-rideau .di-top{transform:translateY(-101%)}
.di-rideau .di-bot{transform:translateY(101%)}
.di-fast .di-half{transition-duration:.25s}
/* filet bleu à la jointure, visible seulement pendant l'ouverture du rideau */
.di-half::after{content:'';position:absolute;left:0;right:0;height:2px;background:#1f3c88;opacity:0;transition:opacity .15s}
.di-top::after{bottom:0}
.di-bot::after{top:0}
.di-rideau .di-half::after{opacity:1}

/* la scène (mur + logo) est posée AU-DESSUS des deux moitiés, au centre : elle ne se coupe pas, elle s'efface */
.di-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .22s ease .02s,transform .35s ease}
.di-rideau .di-scene{opacity:0;transform:scale(1.05)}
.di-fast .di-scene{transition-duration:.15s}
.di-stage{position:relative;width:min(74vw,340px);aspect-ratio:370/385;flex:none;
  --bw:clamp(70px,min(21vw,9vw + 40px),140px);--bh:calc(var(--bw)*.46);--gap:calc(var(--bw)*.045)}

/* le logo : dessin noir détouré, caché derrière le mur, il s'ouvre depuis le milieu quand le mur s'ouvre */
.di-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;clip-path:inset(0 50% 0 50%)}
.di-ok .di-logo{display:block}
.di-ouvre .di-logo{clip-path:inset(0 0 0 0);transition:clip-path .38s var(--di-ease)}

/* le mur : 3 rangs centrés sur la scène (quinconce : le rang du milieu est décalé d'une demi-brique) */
.di-mur{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column-reverse;gap:var(--gap);width:calc(var(--bw)*4 + var(--gap)*3)}
.di-rang{display:flex;gap:var(--gap)}
.di-b{position:relative;flex:none;width:var(--bw);height:var(--bh);border-radius:3px;background:var(--c);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.2);
  animation:diPose .34s cubic-bezier(.3,1.35,.5,1) var(--d) backwards}
.di-b--demi{width:calc(var(--bw)/2 - var(--gap)/2)}
@keyframes diPose{0%{opacity:0;transform:translateY(calc(var(--bh)*-1.1)) scale(.96)}55%{opacity:1;transform:translateY(5px)}78%{transform:translateY(-2px)}100%{opacity:1;transform:none}}
/* le mur s'ouvre : gauche vers la gauche, droite vers la droite (rang du milieu un peu en retard) */
.di-ouvre .di-b{transition:transform .32s cubic-bezier(.6,0,.9,.45) var(--o,0s),opacity .3s ease var(--o,0s)}
.di-ouvre .di-b[data-s="l"]{transform:translateX(-70vw) rotate(-8deg);opacity:0}
.di-ouvre .di-b[data-s="r"]{transform:translateX(70vw) rotate(8deg);opacity:0}

/* ---------- 2. HERO : titre mot par mot, parallaxe, poussière de mortier ---------- */
.di-hero{position:relative;min-height:clamp(640px,calc(100svh - 118px),820px);display:flex;align-items:flex-end;overflow:hidden;background:rgb(var(--overlay-rgb))}
.di-hero [data-hero-slide]{background-size:cover;background-position:center}
.di-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--overlay-rgb),.94) 0%,rgba(var(--overlay-rgb),.8) 48%,rgba(var(--overlay-rgb),.42) 100%)}
.di-voile-bas{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(var(--overlay-rgb),.88),transparent)}
.di-hero-in{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:120px 24px 56px}
.di-hero-txt{max-width:760px;display:flex;flex-direction:column;gap:22px;color:#fff}
.di-pill{display:inline-flex;align-self:flex-start;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:40px;padding:9px 18px;font-size:13px;font-weight:700;letter-spacing:.14em;color:#fff}
.di-hero h1{font-size:clamp(30px,5vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.di-hero-txt>p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.88);max-width:600px}
.di-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.di-w{display:inline-block;white-space:nowrap}
.di-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--di-ease),transform .85s var(--di-ease),filter .7s ease;transition-delay:calc(var(--i,0)*70ms)}
/* garde-fou CSS : même si le JS plante, les mots se montrent seuls au bout de 3,6 s */
html.di-hide .di-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:diShow .01s linear 3.6s forwards}
@keyframes diShow{to{opacity:1;transform:none;filter:none}}
.di-par{scale:1.06;will-change:translate}
.di-poussiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* boutons du hero : le bleu #1f3c88 sur le voile bleu nuit ne ferait que 1,66:1 -> bouton principal BLANC, texte bleu (10,19:1) */
.di-hero .da-btn--or{background:#fff;border-color:#fff;color:var(--accent)}
.di-hero .da-btn--or:hover{background:#e8efff;border-color:#e8efff;color:var(--accent-fonce);box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.di-hero .da-btn--or::after{background:linear-gradient(100deg,transparent,rgba(31,60,136,.18),transparent)}

/* photos du hero : sur mobile le sujet est vers 65 % de la largeur, on recadre vers la droite */
@media (max-width:767px){
  .di-hero [data-hero-slide]{background-position:65% center}
  .di-hero-in{padding:96px 20px 40px}
  .di-hero-txt>p{font-size:16px}
}

/* ---------- 3. HERO : pastilles de garanties (verre léger + icône SVG), en cascade après le titre ----------
   Même déclencheur que les mots du titre : html.di-hide (posée par intro.js, retirée à l'ouverture de l'intro).
   Garde-fou : sans JS ou si le script plante, elles apparaissent seules à 3,9 s. */
.di-garanties{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.di-garanties li{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:40px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .7s var(--di-ease),transform .85s var(--di-ease),filter .7s ease,background .3s,border-color .3s;
  transition-delay:calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),0s,0s}
.di-g-ico{display:flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(143,180,255,.22);border:1px solid rgba(143,180,255,.6);color:#d6e3ff}
.di-g-ico svg{display:block}
.di-garanties li:hover{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.1));border-color:rgba(143,180,255,.75)}
html.di-hide .di-garanties li{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;animation:diShow .01s linear 3.9s forwards}
@media (max-width:480px){
  .di-garanties{gap:8px}
  .di-garanties li{font-size:13px;padding:6px 14px 6px 6px;gap:8px}
  .di-g-ico{width:26px;height:26px}
  .di-g-ico svg{width:16px;height:16px}
}

/* ---------- Mouvement réduit : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  html.di-pre::after{display:none!important}
  #di-intro{display:none!important}
  .di-w>i{transition:none!important}
  html.di-hide .di-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .di-poussiere{display:none!important}
  html.di-hide .di-garanties li{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .di-garanties li{transition:none!important}
  .di-par{scale:1;translate:none!important}
}