/* ═══════════════════════════════════════════════════════════════════════
   DIARRALÀ SOLUTIONS — design « Energy Flow »
   ───────────────────────────────────────────────────────────────────────
   La page se lit comme un circuit : de la source à l'usage. Un fil relie
   les étapes, un nœud marque chaque étape, une teinte porte un sens et un
   seul — ambre la production, vert le stockage, bleu la conversion et la
   mesure, encre le neutre. Le rouge n'apparaît que sur l'appel à l'action.

   Mobile d'abord : le fil est vertical, à gauche ; il devient horizontal
   à partir de 1024 px. Les animations s'arrêtent si le visiteur a demandé
   moins de mouvement.

   Ce fichier vient après tailwind.css (compilé) : il ne dépend d'aucune
   classe Tailwind et se modifie sans recompiler.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ──────────────────────────────────────────────────────── */
:root{
  --bg-main:#FAFAFA;
  --text-main:#0E2433;
  --text-soft:#546E7A;            /* 4,9:1 sur le fond */
  --bg-dark:#0E2433;
  --surface:#ECEFF1;
  --ligne:#CFD8DC;

  /* Rouge marque ; grand texte gras blanc sur les CTA. */
  --action-primary:#E10613;
  --action-primary-hover:#C4062F;

  --amb:#FF8F00;  --amb-t:#9E5900;   /* production   */
  --ver:#64DD17;  --ver-t:#33691E;   /* stockage : aplat seulement, jamais du texte */
  --ble:#0277BD;  --ble-t:#01579B;   /* conversion, mesure */

  --font-titre:'Montserrat','Segoe UI',Roboto,Arial,sans-serif;
  --font-corps:'DM Sans','Segoe UI',Roboto,Arial,sans-serif;
  --rayon:14px;
}

/* Teintes : à poser sur un bloc, ses enfants les héritent. */
.t-amb{--tone:var(--amb);--tone-t:var(--amb-t)}
.t-ver{--tone:var(--ver);--tone-t:var(--ver-t)}
.t-ble{--tone:var(--ble);--tone-t:var(--ble-t)}
.t-enc{--tone:var(--text-main);--tone-t:#37474F}
.t-gri{--tone:#90A4AE;--tone-t:#546E7A}

/* Sur fond sombre, le neutre devient clair, le bleu et l'ambre s'éclaircissent.
   Deux formes : la teinte peut être sur l'ancêtre .fl-sombre (descendant, avec
   espace) ou sur le même élément (composé, sans espace) selon les blocs. */
.fl-sombre .t-enc,.fl-sombre.t-enc{--tone:#fff;--tone-t:#fff}
.fl-sombre .t-ble,.fl-sombre.t-ble{--tone:#4FC3F7;--tone-t:#4FC3F7}
.fl-sombre .t-amb,.fl-sombre.t-amb{--tone:#FFB74D;--tone-t:#FFB74D}
.fl-h3.l{font-size:26px;line-height:1.2;letter-spacing:-.028em}
@media (min-width:640px){.fl-h3.l{font-size:32px}}

/* ── 2. Structure ───────────────────────────────────────────────────── */
.fl-sec{padding:64px 0}
.fl-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.fl-surface{background:var(--surface)}
.fl-sombre{background:var(--bg-dark);color:#fff}
@media (min-width:1024px){.fl-sec{padding:92px 0}.fl-wrap{padding:0 32px}}

.fl-head{max-width:760px;margin-bottom:44px}
.fl-eyebrow{display:flex;align-items:center;gap:10px;font:700 11.5px/1 var(--font-titre);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tone-t)}
.fl-eyebrow::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--tone)}
.fl-eyebrow::after{content:"";flex:none;width:56px;height:2px;background:var(--tone);opacity:.45}
.fl-h2{margin:16px 0 0;font:800 30px/1.14 var(--font-titre);letter-spacing:-.03em;color:var(--text-main)}
.fl-h3{margin:0;font:700 19px/1.25 var(--font-titre);letter-spacing:-.02em;color:var(--text-main)}
.fl-lead{margin:16px 0 0;max-width:64ch;font-size:16px;line-height:1.68;color:var(--text-soft)}
.fl-p{margin:10px 0 0;font-size:16px;line-height:1.65;color:var(--text-soft)}
.fl-p b{font-weight:600;color:var(--text-main)}
@media (min-width:640px){.fl-h2{font-size:40px}}

.fl-sombre .fl-eyebrow{color:rgba(255,255,255,.72)}
.fl-sombre .fl-h2,.fl-sombre .fl-h3{color:#fff}
.fl-sombre .fl-lead,.fl-sombre .fl-p{color:rgba(255,255,255,.74)}
.fl-sombre .fl-p b{color:#fff}

/* Liens d'action secondaires : texte, pas bouton */
.fl-lien{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;
  font:700 14px var(--font-titre);color:var(--tone-t);text-decoration:none}
.fl-lien svg{width:16px;height:16px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.fl-lien:hover svg{transform:translateX(4px)}
.fl-sombre .fl-lien{color:#fff}

/* Boutons. Le rouge est réservé à .cta (défini dans chaque page). */
.btn-encre,.btn-ligne{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;
  border-radius:12px;font:600 16px var(--font-titre);text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s}
.btn-encre{background:var(--text-main);color:#fff}
.btn-encre:hover{background:#37474F;transform:translateY(-2px)}
.btn-ligne{border:1.5px solid #B0BEC5;color:var(--text-main)}
.btn-ligne:hover{border-color:var(--text-main);background:#fff}
.btn-encre svg,.cta svg{width:16px;height:16px}

/* ── 3. Le fil ──────────────────────────────────────────────────────────
   .fl-liste  : fil vertical, nœuds à gauche, éléments qui s'y branchent.
   .fl-etapes : étapes en série ; le fil devient horizontal dès 1024 px.   */
.fl-liste{position:relative;margin:0;padding:0 0 0 34px;list-style:none}
.fl-liste::before{content:"";position:absolute;left:5px;top:12px;bottom:14px;width:0;border-left:2px dashed var(--tone,#90A4AE);opacity:.75}
.fl-item{position:relative;padding:0 0 34px}
.fl-item:last-child{padding-bottom:0}
.fl-item::before{content:"";position:absolute;left:-34px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-main);border:2.5px solid var(--tone)}
.fl-surface .fl-item::before{background:var(--surface)}
.fl-sombre .fl-item::before{background:var(--bg-dark)}
.fl-sombre .fl-liste::before{opacity:.9}
.fl-item .fl-tag{display:block;margin-bottom:6px}
.fl-tag{font:700 11.5px/1.2 var(--font-titre);letter-spacing:.12em;text-transform:uppercase;color:var(--tone-t)}
.fl-sombre .fl-tag{color:rgba(255,255,255,.72)}

.fl-etapes{display:grid;gap:0;grid-template-columns:1fr}
.fl-etape{position:relative;padding:0 0 38px 34px}
.fl-etape:last-child{padding-bottom:0}
.fl-etape::before{content:"";position:absolute;left:5px;top:16px;bottom:-6px;width:0;border-left:2px dashed var(--tone)}
.fl-etape:last-child::before{display:none}
.fl-etape::after{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--tone)}
.fl-num{display:block;margin-bottom:8px;font:800 12px/1 var(--font-titre);letter-spacing:.14em;color:var(--tone-t)}
.fl-sombre .fl-num{color:rgba(255,255,255,.72)}
.fl-ico{width:26px;height:26px;margin-bottom:12px;fill:none;stroke:var(--tone-t);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (min-width:1024px){
  .fl-etapes{grid-template-columns:repeat(3,1fr)}
  .fl-etapes.quatre{grid-template-columns:repeat(4,1fr)}
  .fl-etape{padding:40px 30px 0 0}
  .fl-etape::before,.fl-etape:last-child::before{display:block;left:0;right:0;top:5px;bottom:auto;width:auto;height:0;border-left:0;border-top:2px dashed var(--tone)}
  .fl-etape:last-child::before{right:auto;width:64px}
}

/* Deux colonnes : présentation à gauche, fil à droite */
.fl-deux{display:grid;gap:36px}
@media (min-width:1024px){.fl-deux{grid-template-columns:5fr 7fr;gap:72px;align-items:start}
  .fl-deux .fl-head{margin-bottom:0}}

/* ── 4. Héros et schéma de principe ─────────────────────────────────── */
/* Photo de fond, décorative (alt vide) : le texte reste lisible grâce au
   voile d'encre, plus dense à gauche où se trouve le texte. */
.fl-hero{position:relative;overflow:hidden;padding:44px 0 56px;background:var(--bg-dark);color:#fff}
.fl-hero-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:58% 60%}
.fl-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(14,36,51,.84)}
.fl-hero .fl-wrap{position:relative;z-index:2}
.fl-hero .fl-lieu{color:rgba(255,255,255,.85)}
.fl-hero .fl-lieu::before{background:var(--amb)}
.fl-hero .fl-h1{color:#fff}
.fl-hero .fl-h1 em{color:#fff}
.fl-hero .fl-lead{color:rgba(255,255,255,.86)}
.fl-hero .btn-ligne{border-color:rgba(255,255,255,.55);color:#fff}
.fl-hero .btn-ligne:hover{background:rgba(255,255,255,.12);border-color:#fff}
.fl-federe{margin:26px 0 0;max-width:44ch;padding-left:18px;border-left:3px solid var(--amb);
  font:700 19px/1.4 var(--font-titre);letter-spacing:-.02em;color:#fff}
@media (min-width:640px){.fl-federe{font-size:21px}}
.fl-hero-grille{display:grid;gap:40px}
.fl-hero-grille>div{max-width:680px}
@media (min-width:1024px){.fl-hero{padding:96px 0 104px}}
.fl-lieu{display:inline-flex;align-items:center;gap:9px;font:700 11.5px/1 var(--font-titre);
  letter-spacing:.12em;text-transform:uppercase;color:#37474F}
.fl-lieu::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-main)}
.fl-h1{margin:22px 0 0;max-width:19ch;font:800 34px/1.08 var(--font-titre);letter-spacing:-.035em;color:var(--text-main)}
@media (min-width:640px){.fl-h1{font-size:46px}}
@media (min-width:1024px){.fl-h1{font-size:54px}}
.fl-h1 em{font-style:normal;color:#fff;text-decoration:underline;text-decoration-color:var(--amb);text-decoration-thickness:4px;text-underline-offset:7px}
.fl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 5. Bandeau de marques ──────────────────────────────────────────── */
.fl-marques{background:var(--bg-dark);color:#fff;padding:34px 0}
.fl-marques-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.fl-marques p{margin:0;font:700 11.5px/1.3 var(--font-titre);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.fl-marques ul{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;margin:0;padding:0;list-style:none}
.fl-marques li{position:relative;font:800 19px/1 var(--font-titre);letter-spacing:-.01em;color:#fff}
.fl-marques li+li::before{content:"";position:absolute;left:-19px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--amb)}
.fl-marques small{display:block;margin-top:14px;font-size:13px;color:rgba(255,255,255,.6)}
@media (min-width:1024px){.fl-marques-ligne{flex-wrap:nowrap}}

/* ── 6. Blocs particuliers ──────────────────────────────────────────── */
.fl-puces{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.fl-puces li{padding:7px 13px;border:1px solid var(--tone);border-radius:99px;font:600 13px var(--font-titre);
  color:var(--tone-t);background:color-mix(in srgb,var(--tone) 8%,transparent)}
.fl-verbes{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;font:800 21px/1.2 var(--font-titre);letter-spacing:-.025em}
.fl-verbes span:nth-child(even){color:var(--ble-t)}
.fl-cite{margin:20px 0 0;font:700 19px/1.35 var(--font-titre);letter-spacing:-.02em;color:var(--text-main)}
@media (min-width:640px){.fl-cite{font-size:22px}}
.fl-filet{margin-top:44px;padding-top:26px;border-top:1px solid var(--ligne)}

.fl-suivi{margin-top:64px;padding-top:44px;border-top:1px solid var(--ligne)}
.fl-suivi-grille{display:grid;gap:0 44px;margin-top:38px}
@media (min-width:1024px){.fl-suivi-grille{grid-template-columns:1fr 1fr}}
.fl-refs{display:grid;gap:0;margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--ligne)}
.fl-refs a{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--ligne);
  color:var(--text-main);text-decoration:none;transition:padding .35s cubic-bezier(.22,1,.36,1)}
.fl-refs a:hover{padding-left:10px}
.fl-refs .fl-tag{min-width:110px}
.fl-refs strong{font:700 16.5px/1.3 var(--font-titre);letter-spacing:-.015em}
@media (min-width:1024px){.fl-refs{grid-template-columns:repeat(2,1fr);column-gap:44px}}

.fl-atelier{display:grid;gap:36px}
@media (min-width:1024px){.fl-atelier{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}
.fl-atelier figure{margin:0;overflow:hidden;border-radius:var(--rayon)}
.fl-atelier img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.fl-adresse{margin:22px 0 0;padding:16px 0 0 18px;border-left:3px solid var(--text-main);font:600 16px/1.5 var(--font-titre);color:var(--text-main)}

/* ── 7. Réalisations ────────────────────────────────────────────────── */
.fl-photo{margin:0}
.fl-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rayon)}
.fl-photo figcaption{padding:18px 2px 0}
.fl-photo strong{display:block;margin-top:6px;font:700 22px/1.25 var(--font-titre);letter-spacing:-.025em}
.fl-photo figcaption>span:last-child{display:block;margin-top:10px;font-size:16px;line-height:1.65;color:var(--text-soft)}
@media (min-width:1024px){.fl-deux--photo{grid-template-columns:7fr 5fr;gap:64px}}

.fl-sous-titre{margin:72px 0 0;max-width:760px}
.fl-cta-ligne{display:grid;gap:18px;margin-top:44px;padding-top:28px;border-top:1px solid var(--ligne)}
@media (min-width:1024px){.fl-cta-ligne{grid-template-columns:1fr auto;align-items:center;gap:48px}}

/* Les cartes-photos existantes (.rl-*) : plus légères, dans l'esprit du fil */
.rl-carte{border-radius:var(--rayon)!important;border:1px solid #DCE4E7!important;box-shadow:none!important;background:#fff}
.rl-img{border-radius:0}
.rl-corps{padding:20px 22px 24px}
.rl-fiche{border-top-style:dashed!important}

/* ── 8. Menu mobile ─────────────────────────────────────────────────── */
.menu-mob{display:none;border-top:1px solid rgba(255,255,255,.1);background:var(--bg-dark)}
.menu-mob.ouvert{display:block}
.menu-mob a{display:flex;align-items:center;min-height:52px;padding:0 20px;color:rgba(255,255,255,.88);
  font:600 16px var(--font-titre);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-mob a:hover,.menu-mob a:focus-visible{background:rgba(255,255,255,.08);color:#fff}
@media (min-width:1024px){.menu-mob,.menu-mob.ouvert{display:none}}

/* ── 9. Mouvement réduit ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fl-liste::before,.fl-etape::before,.fl-chemin{animation:none!important}
  .fl-lien svg,.fl-refs a,.btn-encre{transition:none}
}

/* ── 10. Corps de texte à 16 px minimum ─────────────────────────────────
   Les classes Tailwind de 13,5 à 15,5 px servent au texte courant : elles
   sont relevées à 16 px. Les étiquettes en capitales (11,5 px) et les
   libellés de champs (14 px) restent plus petits ; un champ de saisie à
   16 px évite en outre le zoom automatique des téléphones. */
.text-\[13\.5px\],.text-\[14px\],.text-\[14\.5px\],.text-\[15px\],.text-\[15\.5px\]{font-size:16px}
.text-\[12\.5px\]{font-size:14px}
input,select,textarea{font-size:16px}

/* ── 11. Réseaux sociaux du pied de page ───────────────────────────────── */
.footer-social__title{margin:0 0 12px;font:700 11.5px/1 var(--font-titre);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.footer-social__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.footer-social__list a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  transition:background .25s,border-color .25s}
.footer-social__list a:hover,.footer-social__list a:focus-visible{background:rgba(255,255,255,.14);border-color:#fff}

/* Bouton du bandeau : une seule ligne, y compris sur petit écran. */
header a.cta{font-size:14.5px;white-space:nowrap}
@media (max-width:420px){header a.cta{padding-left:14px;padding-right:14px}}

/* ── 12. Boutons sur téléphone ──────────────────────────────────────────
   Les boutons d'action prennent toute la largeur : une taille unique, un
   texte de 16 px, 52 px de haut. Le bouton du bandeau reste compact. Toute
   cible tactile fait au moins 44 px (le bouton du menu, 48). */
@media (max-width:640px){
  .cta,.btn-encre,.btn-ligne,#contact a.inline-flex,#contact button.inline-flex{
    display:flex;width:100%;min-height:52px;justify-content:center;font-size:16px}
  header a.cta{display:inline-flex;width:auto;min-height:44px;font-size:14.5px}
  .fl-actions{flex-direction:column;align-items:stretch;gap:12px}
  .fl-lien{min-height:48px}
  footer a.inline-flex{min-height:44px}
  #btn-menu{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  header a[aria-label*="accueil"]{display:inline-flex;align-items:center;min-height:44px}
}

/* Très petits écrans (≤ 360 px) : le bouton du bandeau devient « Audit » et
   le logo ne se comprime jamais. Le nom accessible reste « Demander un audit ». */
.cta-court{display:none}
header nav>a:first-child,.logo-nav{flex-shrink:0}
@media (max-width:360px){.cta-long{display:none}.cta-court{display:inline}}

/* ── 13. Fond photo d'intro de section ─────────────────────────────────
   Même voile que le hero (encre à 84 %, aplat, sans dégradé) : une photo
   de chantier en fond, le texte passe en blanc via .fl-sombre. */
.fl-fond-photo{position:relative;overflow:hidden;border-radius:28px;padding:36px 26px;
  background-size:cover;background-position:center;min-height:260px;
  display:flex;flex-direction:column;justify-content:center}
.fl-fond-photo::before{content:"";position:absolute;inset:0;background:rgba(14,36,51,.84);pointer-events:none}
.fl-fond-photo>*{position:relative;z-index:1}
.fl-head.fl-fond-photo{max-width:none}
@media (min-width:640px){.fl-fond-photo{padding:52px 48px}}