@charset "UTF-8";
/* =====================================================================
   SIT_INCENDIE - INCERP
   Feuille de style du site vitrine. Reecrite le 11/08/2026.

   Le design precedent etait celui de STGO (palette taupe/rouge BTP),
   herite du clone. Il vendait une entreprise de batiment ; ici on vend
   un LOGICIEL. Langage visuel refait de zero.

   Contrainte : les NOMS DE CLASSES sont imposes (cables dans index.php,
   header/footer, les modules PHP et les contenus stockes en base). On
   change le design, pas la nomenclature.

   Convention : commentaires en ASCII pur (le CMS manipule du latin1).
   ===================================================================== */

/* Polices servies par le site lui-meme (15/10/2026), plus par Google :
   chaque visite envoyait l'adresse IP du visiteur aux serveurs de Google
   (transfert hors UE sans consentement). Fichiers variables, sous-ensembles
   latin et latin etendu, licence SIL OFL 1.1 : voir fonts/incerp/LICENCES.txt. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/incerp/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/incerp/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/incerp/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/incerp/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   1. Jetons de design
   --------------------------------------------------------------------- */
:root {
  /* Fonds sombres : bleu-encre, pas noir pur (moins dur a l'ecran) */
  --ink:        #080C14;
  --ink-2:      #0F1623;
  --ink-3:      #182133;
  --ink-line:   rgba(255, 255, 255, .10);

  /* Fonds clairs */
  --paper:      #F6F7F9;
  --paper-2:    #EEF0F4;
  --white:      #FFFFFF;

  /* Texte */
  --txt:        #0C1220;
  --txt-2:      #4A5568;
  --txt-3:      #78839A;
  --txt-inv:    #E8ECF3;
  --txt-inv-2:  #96A1B5;

  /* Accent : braise. Legitime sur le secteur incendie, et assez
     saturee pour porter les appels a l'action.
     13/10/2026 : alignee sur la flamme du logo definitif, qui va de
     #F83A08 (base) a #FB8814 (pointe) en passant par #FC5F06. Le bleu de
     la planche de recherche graphique est ECARTE (decision de TJ) : on
     garde l'anthracite + orange du logo final, deja ceux du site. */
  --ember:      #FC5F06;
  --ember-2:    #FB8814;
  --ember-soft: rgba(252, 95, 6, .12);

  /* Accent secondaire : conformite / validation */
  --teal:       #10B981;
  --teal-soft:  rgba(16, 185, 129, .12);

  --line:       rgba(12, 18, 32, .10);
  --line-2:     rgba(12, 18, 32, .06);

  --radius-s:   10px;
  --radius:     16px;
  --radius-l:   24px;
  --radius-xl:  32px;

  --shadow-s:   0 1px 2px rgba(12, 18, 32, .06), 0 2px 8px rgba(12, 18, 32, .04);
  --shadow:     0 4px 12px rgba(12, 18, 32, .07), 0 12px 32px rgba(12, 18, 32, .07);
  --shadow-l:   0 8px 24px rgba(12, 18, 32, .10), 0 32px 64px rgba(12, 18, 32, .14);
  --shadow-eq:  0 24px 70px rgba(252, 95, 6, .22);

  --font-titre: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-txt:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container:  1200px;
  --transition: .28s cubic-bezier(.16, 1, .3, 1);

  /* Compat : anciens noms de variables encore reference ailleurs */
  --rouge:      var(--ember);
  --noir:       var(--ink);
  --sable:      var(--paper);
  --taupe:      var(--ink-2);
  --gris:       var(--txt-2);
  --rayon:      var(--radius);
  --ombre:      var(--shadow);
  --ombre-soft: var(--shadow-s);
}

/* ---------------------------------------------------------------------
   2. Bases
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-txt);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ember); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--ember-2); }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--txt);
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--txt); }

::selection { background: var(--ember); color: #fff; }

/* Ancrage sous le header colle */
:target { scroll-margin-top: 100px; }

/* ---------------------------------------------------------------------
   3. Mise en page
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
}

.narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }

.section--sable { background: var(--paper); }

/* Sections sombres : degrade + halo de braise, pour ne pas avoir de
   grands aplats plats. */
.section--taupe,
.section--noir {
  background: var(--ink);
  color: var(--txt-inv);
  position: relative;
  overflow: hidden;
}
.section--taupe { background: linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 65%); }

.section--taupe::before,
.section--noir::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -20%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(252, 95, 6, .16), transparent 70%);
  pointer-events: none;
}
.section--taupe::after,
.section--noir::after {
  content: "";
  position: absolute;
  inset: auto -25% -50% 40%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(16, 185, 129, .10), transparent 70%);
  pointer-events: none;
}
.section--taupe > *,
.section--noir > * { position: relative; z-index: 1; }

.section--taupe h1, .section--taupe h2, .section--taupe h3, .section--taupe h4,
.section--noir  h1, .section--noir  h2, .section--noir  h3, .section--noir  h4 { color: #fff; }

.section--taupe p, .section--noir p { color: var(--txt-inv-2); }
.section--taupe .lead, .section--noir .lead { color: var(--txt-inv); }

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--txt-2);
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   4. Sur-titre (kicker)
   --------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-txt);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ember);
  background: var(--ember-soft);
  border: 1px solid rgba(252, 95, 6, .22);
  padding: .42rem .95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgba(252, 95, 6, .25);
}

.section--taupe .kicker,
.section--noir .kicker,
.hero-slider .kicker,
.page-header .kicker {
  color: var(--ember-2);
  background: rgba(252, 95, 6, .14);
  border-color: rgba(251, 136, 20, .3);
}

/* ---------------------------------------------------------------------
   5. Boutons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-txt);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--ember);
  border: 1px solid transparent;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: 0 6px 20px rgba(252, 95, 6, .28);
}
.btn::after {
  content: "\2192";
  font-size: 1.05em;
  transition: transform var(--transition);
}
.btn:hover {
  color: #fff;
  background: #FD7310;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(252, 95, 6, .38);
}
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--txt);
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--paper);
  color: var(--txt);
  border-color: var(--txt-3);
  box-shadow: none;
}
.section--taupe .btn--ghost,
.section--noir .btn--ghost,
.hero-slider .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.section--taupe .btn--ghost:hover,
.section--noir .btn--ghost:hover,
.hero-slider .btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.btn--dark {
  background: var(--ink);
  box-shadow: 0 6px 20px rgba(8, 12, 20, .25);
}
.btn--dark:hover { background: var(--ink-3); box-shadow: 0 12px 30px rgba(8, 12, 20, .3); }

/* ---------------------------------------------------------------------
   6. En-tete
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line-2);
  box-shadow: 0 1px 20px rgba(12, 18, 32, .06);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
}

.site-logo { display: inline-flex; align-items: center; gap: .6rem; }

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--txt-2);
  padding: .55rem .72rem;
  border-radius: 999px;
  /* 8 entrees de menu : sans ceci, "Application terrain" et "Registre de
     securite" se coupent sur deux lignes et desalignent toute la barre. */
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.main-nav a:hover { color: var(--txt); background: var(--paper); }
.main-nav a.is-active { color: var(--ember); background: var(--ember-soft); }

/* Derniere entree (Demonstration) traitee en bouton */
.main-nav li:last-child a {
  background: var(--ink);
  color: #fff;
  padding: .7rem 1.3rem;
  margin-left: .5rem;
  box-shadow: 0 4px 14px rgba(8, 12, 20, .2);
}
.main-nav li:last-child a:hover { background: var(--ember); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--txt);
  padding: .5rem .7rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.hero-slider__track { position: relative; }

.hero-slider__slide {
  display: none;
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  background-size: cover;
  background-position: center;
  align-items: center;
}
.hero-slider__slide.is-active { display: flex; }

/* Voile : assez dense pour que le texte reste lisible sur n'importe
   quelle photo, avec un degrade lateral pour garder de la profondeur. */
.hero-slider__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 12, 20, .96) 0%, rgba(8, 12, 20, .82) 42%, rgba(8, 12, 20, .55) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(252, 95, 6, .30), transparent 60%);
}

.hero-slider__inner {
  position: relative;
  z-index: 2;
  padding: clamp(4rem, 9vw, 7rem) 0;
  max-width: 780px;
}
.hero-slider__inner h1 { color: #fff; margin-bottom: 1.5rem; }
.hero-slider__inner p {
  color: var(--txt-inv);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 2.2rem;
}
.hero-slider__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Fleches et pastilles : masquees tant qu'il n'y a qu'un seul slide. */
.hero-slider__btn, .hero-slider__dots { display: none; }
.hero-slider__track:has(.hero-slider__slide + .hero-slider__slide) ~ .hero-slider__dots { display: flex; }

.hero-slider__dots {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  gap: .5rem;
  z-index: 3;
}
.hero-slider__dot {
  width: 32px; height: 4px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background var(--transition);
}
.hero-slider__dot.is-active { background: var(--ember); }

/* Bandeau de reassurance colle sous le hero */
.hero-proof {
  border-top: 1px solid var(--ink-line);
  background: rgba(8, 12, 20, .6);
  position: relative;
  z-index: 3;
}
.hero-proof__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 1.1rem 0;
  margin: 0;
  list-style: none;
  justify-content: center;
}
.hero-proof__list li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; font-weight: 600;
  color: var(--txt-inv-2);
  letter-spacing: .01em;
}
.hero-proof__list li::before {
  content: "";
  width: 16px; height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--teal-soft);
  border: 1px solid rgba(16, 185, 129, .45);
  background-image: linear-gradient(transparent, transparent);
  position: relative;
}

/* ---------------------------------------------------------------------
   8. Bandeau de page interieure
   --------------------------------------------------------------------- */
.page-header {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5rem);
  display: flex;
  align-items: flex-end;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Volontairement tres attenue : la photo sert de texture, pas de sujet.
     On vend un logiciel, le bandeau doit rester sobre. */
  opacity: .3;
}
.page-header__overly {
  position: absolute;
  inset: 0;
  /* Allege le 12/08/2026 : le voile etouffait la photo qu'il recouvre.
     Le titre garde une marge de contraste tres large, mesuree. */
  background:
    linear-gradient(100deg, rgba(8, 12, 20, .78) 0%, rgba(8, 12, 20, .52) 55%, rgba(8, 12, 20, .28) 100%),
    radial-gradient(110% 80% at 85% 8%, rgba(252, 95, 6, .26), transparent 62%);
}
.page-header .container { position: relative; z-index: 2; }
.page-header__inner { max-width: 820px; }
.page-header__inner h2 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.032em;
  margin-bottom: .9rem;
}
.page-header__sub {
  color: var(--txt-inv-2);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

/* ---------------------------------------------------------------------
   9. Grilles et cartes
   --------------------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Liseré de braise qui se revele au survol */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ember), var(--ember-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
  border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }

.card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card__body { padding: 1.8rem; flex: 1; }
.card__body h3 { margin-bottom: .6rem; }
.card__body p { color: var(--txt-2); font-size: .97rem; margin-bottom: 0; }

.card__meta {
  display: inline-block;
  font-family: var(--font-titre);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: .7rem;
}

/* Cartes sur fond sombre */
.section--taupe .card,
.section--noir .card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ink-line);
}
.section--taupe .card__body p,
.section--noir .card__body p { color: var(--txt-inv-2); }

/* ---------------------------------------------------------------------
   10. Blocs deux colonnes
   --------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--rev .split__media { order: -1; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   11. Chiffres cles
   --------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ink-line);
  transition: transform var(--transition), border-color var(--transition);
}
.stat:hover { transform: translateY(-3px); border-color: rgba(251, 136, 20, .35); }

.stat__num {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 20%, var(--ember-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  margin-top: .7rem;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt-inv-2);
}
/* Sur fond clair (si le bloc est deplace) */
.section:not(.section--noir):not(.section--taupe) .stat { background: var(--paper); border-color: var(--line-2); }
.section:not(.section--noir):not(.section--taupe) .stat__num {
  background: linear-gradient(135deg, var(--txt) 20%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section:not(.section--noir):not(.section--taupe) .stat__label { color: var(--txt-2); }

/* ---------------------------------------------------------------------
   12. Captures d'ecran  (composant NOUVEAU)
   --------------------------------------------------------------------- */
/* .shot            cadre navigateur autour d'une capture produit
   .shot--phone     cadre telephone pour l'application terrain
   .shot__ph        etat "emplacement reserve" tant qu'il n'y a pas
                    d'image : affiche ce qu'il faut y mettre.
   Usage minimal :
     <figure class="shot"><div class="shot__bar"></div>
       <div class="shot__body"><img src="..." alt="..."></div>
     </figure>                                                        */

.shot {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-l);
  transition: transform var(--transition), box-shadow var(--transition);
}
.shot:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(12,18,32,.14), 0 40px 80px rgba(12,18,32,.18); }

/* Barre de navigateur */
.shot__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
}
.shot__bar::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: #FF5F57;
  box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
  flex: 0 0 10px;
  margin-right: 32px;
}
.shot__url {
  flex: 1;
  font-family: var(--font-txt);
  font-size: .74rem;
  font-weight: 600;
  color: var(--txt-3);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .28rem .9rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot__body { position: relative; background: var(--paper); }
.shot__body img { width: 100%; display: block; }

/* Emplacement reserve */
.shot__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  min-height: 340px;
  padding: 2.5rem 1.5rem;
  background:
    repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(12,18,32,.022) 12px, rgba(12,18,32,.022) 24px),
    var(--paper);
  border: 2px dashed var(--line);
  border-radius: var(--radius-s);
  margin: .9rem;
  color: var(--txt-3);
}
.shot__ph strong {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.02rem;
  color: var(--txt-2);
  letter-spacing: -.01em;
}
.shot__ph span { font-size: .84rem; max-width: 46ch; line-height: 1.5; }
.shot__ph::before {
  content: "";
  width: 40px; height: 30px;
  border: 2px solid var(--txt-3);
  border-radius: 5px;
  opacity: .5;
  margin-bottom: .3rem;
  background:
    linear-gradient(var(--txt-3), var(--txt-3)) no-repeat 6px 18px / 12px 2px,
    linear-gradient(var(--txt-3), var(--txt-3)) no-repeat 6px 8px / 22px 2px;
}

/* Variante telephone */
.shot--phone {
  max-width: 300px;
  margin: 0 auto;
  border-radius: 38px;
  padding: 11px;
  background: linear-gradient(160deg, #2A3444, #0E141F);
  border: 0;
  box-shadow: var(--shadow-l);
}
.shot--phone .shot__bar { display: none; }
.shot--phone .shot__body {
  border-radius: 28px;
  overflow: hidden;
  background: var(--white);
  position: relative;
}
/* Encoche */
.shot--phone .shot__body::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 20px;
  background: #0E141F;
  border-radius: 999px;
  z-index: 2;
}
.shot--phone .shot__ph { min-height: 480px; margin: 0; border: 0; border-radius: 28px; }

/* Variante sombre (sur section--taupe / --noir) */
.section--taupe .shot,
.section--noir .shot { border-color: var(--ink-line); background: var(--ink-3); }
.section--taupe .shot__bar,
.section--noir .shot__bar { background: var(--ink-3); border-bottom-color: var(--ink-line); }
.section--taupe .shot__url,
.section--noir .shot__url { background: rgba(0,0,0,.3); border-color: var(--ink-line); color: var(--txt-inv-2); }
.section--taupe .shot__body,
.section--noir .shot__body { background: var(--ink-2); }
.section--taupe .shot__ph,
.section--noir .shot__ph {
  background: repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(255,255,255,.02) 12px, rgba(255,255,255,.02) 24px), var(--ink-2);
  border-color: var(--ink-line);
  color: var(--txt-inv-2);
}
.section--taupe .shot__ph strong,
.section--noir .shot__ph strong { color: var(--txt-inv); }

/* Capture mise en avant, legerement debordante */
.shot--hero { margin-top: -6rem; position: relative; z-index: 5; }

/* Legende sous une capture */
.shot-caption {
  display: block;
  margin-top: .9rem;
  font-size: .86rem;
  color: var(--txt-3);
  text-align: center;
}
.section--taupe .shot-caption,
.section--noir .shot-caption { color: var(--txt-inv-2); }

/* ---------------------------------------------------------------------
   13. Liste d'actualites (rendu partage avec l'ancien gabarit)
   --------------------------------------------------------------------- */
.stgo-realisations { padding: 0; }
.stgo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.stgo-real-card, .project-card {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stgo-real-card:hover, .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.stgo-card-imgwrap { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.stgo-card-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.stgo-real-card:hover .stgo-card-imgwrap img { transform: scale(1.05); }
.stgo-card-body { padding: 1.6rem; }
.stgo-card-meta { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ember); }
.stgo-card-intro { color: var(--txt-2); font-size: .96rem; }
.stgo-card-ph, .stgo-ph-txt { background: var(--paper-2); color: var(--txt-3); }

/* ---------------------------------------------------------------------
   14. Formulaire
   --------------------------------------------------------------------- */
.mdl_formulaire {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 3rem);
  max-width: 760px;
  margin: 0 auto;
}
.mdl_formulaire fieldset { border: 0; margin: 0; padding: 0; }
.mdl_formulaire legend { display: none; }

.mdl_formulaire label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--txt);
  margin: 1.3rem 0 .45rem;
  letter-spacing: .01em;
}
.mdl_formulaire label .obl { color: var(--ember); margin-left: .2rem; }

.mdl_formulaire input[type="text"],
.mdl_formulaire input[type="email"],
.mdl_formulaire input[type="tel"],
.mdl_formulaire textarea,
.mdl_formulaire select {
  width: 100%;
  font-family: var(--font-txt);
  font-size: 1rem;
  color: var(--txt);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .85rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.mdl_formulaire textarea { min-height: 150px; resize: vertical; }
.mdl_formulaire input:focus,
.mdl_formulaire textarea:focus,
.mdl_formulaire select:focus {
  outline: 0;
  background: var(--white);
  border-color: var(--ember);
  box-shadow: 0 0 0 4px var(--ember-soft);
}

.mdl_formulaire .blocAlerte {
  background: var(--ember-soft);
  border: 1px solid rgba(252, 95, 6, .22);
  border-radius: var(--radius-s);
  padding: .9rem 1.1rem;
  font-size: .92rem;
  color: var(--txt-2);
}

.mdl_formulaire .submit,
.mdl_formulaire input[type="submit"] {
  width: 100%;
  margin-top: 1.8rem;
  font-family: var(--font-txt);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--ember);
  border: 0;
  border-radius: 999px;
  padding: 1.05rem 2rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(252, 95, 6, .28);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.mdl_formulaire .submit:hover,
.mdl_formulaire input[type="submit"]:hover {
  background: #FD7310;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(252, 95, 6, .38);
}

/* ---------------------------------------------------------------------
   15. Pied de page
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--txt-inv-2);
  padding: clamp(3.5rem, 6vw, 5rem) 0 0;
  font-size: .93rem;
}
.site-footer a { color: var(--txt-inv-2); }
.site-footer a:hover { color: var(--ember-2); }
/* La regle globale strong{color:var(--txt)} rendrait le nom de la societe
   en texte sombre sur fond sombre, donc illisible. */
.site-footer strong { color: #fff; }
.site-footer h3, .site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: .5rem; }

.footer-logo { margin-bottom: 1.1rem; }
.footer-logo img { display: block; width: 200px; max-width: 100%; height: auto; }

.footer-bottom {
  border-top: 1px solid var(--ink-line);
  padding: 1.5rem 0;
  font-size: .85rem;
  color: var(--txt-3);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* Bouton "haut de page" injecte par le gabarit du CMS : sans style, il
   apparait comme une petite boite grise en bas a gauche. */
#totop {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  z-index: 800;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(8, 12, 20, .3);
  transition: background var(--transition), transform var(--transition);
}
#totop:hover { background: var(--ember); transform: translateY(-3px); }

/* Le CMS injecte aussi un ecran de chargement. Non style, il laisse une
   zone vide en haut de page. */
.preloader { display: none; }

/* ---------------------------------------------------------------------
   16. Apparition au scroll
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   17. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .stgo-cards { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Bascule en menu burger tot : 8 entrees ne tiennent pas sur une ligne
   en dessous d'environ 1100px. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line-2);
    box-shadow: var(--shadow);
    padding: 1rem clamp(1.2rem, 4vw, 2.5rem) 1.5rem;
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .main-nav a { padding: .85rem 1rem; border-radius: var(--radius-s); }
  .main-nav li:last-child a { margin: .6rem 0 0; text-align: center; }

  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .shot--hero { margin-top: -3rem; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4, .stgo-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .stat { padding: 1.4rem .8rem; }
  .hero-slider__slide { min-height: 520px; }
  .hero-slider__actions { flex-direction: column; align-items: stretch; }
  .hero-slider__actions .btn { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .shot__ph { min-height: 240px; }
}

/* ---------------------------------------------------------------------
   18. Impression
   --------------------------------------------------------------------- */
@media print {
  .site-header, .main-nav, .nav-toggle, .hero-slider__dots, .site-footer { display: none !important; }
  .section, .page-header { padding: 1rem 0; }
  .section--taupe, .section--noir, .page-header { background: #fff !important; color: #000 !important; }
  .section--taupe h2, .section--noir h2, .page-header__inner h2 { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   19. RAFFINEMENT  (11/08/2026)
   La premiere passe posait la structure mais restait seche : aplats
   plats, cartes sans relief, aucune iconographie. Ce bloc ajoute la
   texture, la profondeur et les icones. Il est volontairement place en
   fin de fichier : a specificite egale, il l'emporte sur les regles
   ci-dessus, ce qui evite de disperser les corrections.
   ===================================================================== */

/* ---------- 19.1 Texture de fond ----------------------------------- */
/* Les sections claires recevaient un aplat uni. On y met une trame de
   points tres discrete + un halo colore : ca "tient" le regard sans
   attirer l'attention. */
.section--sable {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(252, 95, 6, .05), transparent 70%),
    radial-gradient(50% 50% at 90% 100%, rgba(16, 185, 129, .05), transparent 70%),
    var(--paper);
  position: relative;
}
.section--sable::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(12, 18, 32, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  opacity: .55;
  pointer-events: none;
}
.section--sable > * { position: relative; z-index: 1; }

/* Trame quadrillee sur les fonds sombres : donne une profondeur de
   "produit technique" plutot qu'un simple aplat noir. */
.section--noir::after,
.section--taupe::after {
  background:
    radial-gradient(closest-side, rgba(16, 185, 129, .10), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 46px 100%;
}

/* ---------- 19.2 Hero ---------------------------------------------- */
/* La photo d'extincteurs faisait "catalogue de fournisseur". On passe a
   un degrade profond : c'est le vocabulaire visuel du logiciel, et la
   capture produit devient le seul sujet. Le champ img_fond du slide est
   vide en base, donc aucune image ne vient recouvrir ceci. */
.hero-slider {
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(252, 95, 6, .34), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(16, 185, 129, .16), transparent 62%),
    radial-gradient(70% 60% at 50% 0%, rgba(120, 90, 255, .12), transparent 70%),
    linear-gradient(168deg, #0E1626 0%, var(--ink) 60%);
}
.hero-slider__slide { min-height: clamp(600px, 84vh, 860px); }

/* Quadrillage fin + estompage vers le bas */
.hero-slider__track::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 52px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 52px 100%;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
/* Le hero porte de nouveau une photo depuis le 12/08/2026 : le voile
   reprend sa densite. Il reste degrade vers la droite pour que l'image
   se voie, et se ferme a gauche ou se trouvent le titre et le bouton.
   Contraste mesure apres la modification. */
.hero-slider__overlay {
  background:
    linear-gradient(100deg, rgba(8, 12, 20, .74) 0%, rgba(8, 12, 20, .50) 48%, rgba(8, 12, 20, .22) 100%),
    radial-gradient(110% 80% at 85% 8%, rgba(252, 95, 6, .24), transparent 62%);
}
.hero-slider__inner h1 {
  background: linear-gradient(120deg, #fff 30%, #FFD9C9 70%, var(--ember-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Halo derriere la capture qui chevauche le hero */
.shot--hero { position: relative; }
.shot--hero::after {
  content: "";
  position: absolute; inset: auto -6% -14% -6%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(252, 95, 6, .3), transparent 75%);
  filter: blur(38px);
  z-index: -1;
  pointer-events: none;
}

/* ---------- 19.3 Bandeau de page interieure ------------------------ */
.page-header { padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); }
.page-header-bg {
  /* .16 -> .34 -> .60 (12/08/2026). A 16 % la photo etait invisible ; a
     34 % elle restait etouffee sous le voile. La contrainte reelle est le
     contraste du titre, mesure a chaque etape en ecartant l'anticrenelage
     des lettres -- il reste tres au-dessus du seuil. */
  opacity: .72;
}
.page-header::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 48px 100%;
  -webkit-mask-image: radial-gradient(100% 100% at 20% 0%, #000, transparent 70%);
  mask-image: radial-gradient(100% 100% at 20% 0%, #000, transparent 70%);
  pointer-events: none;
}
.page-header .container { z-index: 2; }

/* ---------- 19.4 Cartes -------------------------------------------- */
/* Filet degrade en bordure (masque compose) + relief au survol. */
.card {
  border-radius: 20px;
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, rgba(12, 18, 32, .10), rgba(12, 18, 32, .04) 40%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(12, 18, 32, .04);
}
.card:hover {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, rgba(252, 95, 6, .55), rgba(251, 136, 20, .12) 55%) border-box;
  box-shadow: 0 10px 24px rgba(12, 18, 32, .08), 0 24px 48px rgba(12, 18, 32, .08);
}
.card__body { padding: 1.9rem 1.7rem; }
.card__meta { font-size: .74rem; letter-spacing: .1em; opacity: .9; }

.section--noir .card,
.section--taupe .card {
  background:
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.02)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%) border-box;
  box-shadow: none;
}
.section--noir .card:hover,
.section--taupe .card:hover {
  background:
    linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.03)) padding-box,
    linear-gradient(160deg, rgba(251,136,20,.6), rgba(252,95,6,.12) 55%) border-box;
}

/* ---------- 19.5 Icones -------------------------------------------- */
/* SVG en MASQUE : l'icone prend la couleur du conteneur, donc une seule
   definition sert sur fond clair comme sur fond sombre. */
.ico {
  display: block;
  width: 22px; height: 22px;
  background-color: var(--ember);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* Pastille qui porte l'icone en tete de carte.
   Reglage du 11/08/2026 : la pastille faisait 66 px (44 + 2x11 de padding)
   pour un glyphe de 22 px, soit 33 % -- beaucoup trop petit, et decale vers
   le haut-gauche faute de centrage. On passe en border-box + flex : la
   pastille fait 54 px, le glyphe 30 px, soit 56 %, centre. */
.card__body .ico {
  width: 54px; height: 54px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  border-radius: 15px;
  background-color: var(--ember);
  -webkit-mask: none; mask: none;
}
/* Le masque est porte par le PSEUDO-ELEMENT, pas par la pastille : c'est
   lui qui dessine le glyphe en blanc sur le fond degrade. Ne pas ecrire
   "mask: inherit" ici, on heriterait du "mask: none" de la pastille et
   les icones disparaitraient. */
.card__body .ico::before {
  content: "";
  display: block; width: 30px; height: 30px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.card__body .ico {
  background-image: linear-gradient(150deg, var(--ember), #E03A10);
  box-shadow: 0 6px 16px rgba(252, 95, 6, .28);
}
.section--noir .card__body .ico,
.section--taupe .card__body .ico { box-shadow: none; }

.ico--parc::before,       .ico--parc       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5'/%3E%3C/svg%3E"); }
.ico--planning::before,   .ico--planning   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4M8 15h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4M8 15h3'/%3E%3C/svg%3E"); }
.ico--mobile::before,     .ico--mobile     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ico--devis::before,      .ico--devis      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ico--facture::before,    .ico--facture    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.ico--relance::before,    .ico--relance    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ico--registre::before,   .ico--registre   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ico--metro::before,      .ico--metro      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a9 9 0 0 1 18 0'/%3E%3Cpath d='M12 17l5-5'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a9 9 0 0 1 18 0'/%3E%3Cpath d='M12 17l5-5'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); }
.ico--flotte::before,     .ico--flotte     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-5a2 2 0 0 1 2-1h10a2 2 0 0 1 2 1l2 5v5h-3M6 18H3v-5'/%3E%3Ccircle cx='7.5' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-5a2 2 0 0 1 2-1h10a2 2 0 0 1 2 1l2 5v5h-3M6 18H3v-5'/%3E%3Ccircle cx='7.5' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E"); }
.ico--formation::before,  .ico--formation  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9L12 4 2 9l10 5 10-5z'/%3E%3Cpath d='M6 11.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9L12 4 2 9l10 5 10-5z'/%3E%3Cpath d='M6 11.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-4.5'/%3E%3C/svg%3E"); }
.ico--stock::before,      .ico--stock      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.ico--ticket::before,     .ico--ticket     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 1 1-3.2-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 1 1-3.2-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); }
.ico--satisfaction::before,.ico--satisfaction{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.ico--pilotage::before,   .ico--pilotage   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10M9 21V4M15 21v-8M21 21V7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10M9 21V4M15 21v-8M21 21V7'/%3E%3C/svg%3E"); }
.ico--doc::before,        .ico--doc        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6l2 3h8v13H4z'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6l2 3h8v13H4z'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E"); }
.ico--bureau::before,     .ico--bureau     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.ico--rapport::before,    .ico--rapport    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E"); }
.ico--norme::before,    .ico--norme    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 9l2 2 4-4'/%3E%3Cpath d='M8.5 14.5L7 22l5-2.5L17 22l-1.5-7.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 9l2 2 4-4'/%3E%3Cpath d='M8.5 14.5L7 22l5-2.5L17 22l-1.5-7.5'/%3E%3C/svg%3E"); }
.ico--qr::before,         .ico--qr         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 20h1M17 21v-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 20h1M17 21v-1'/%3E%3C/svg%3E"); }
.ico--eclair::before,     .ico--eclair     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.ico--wifi::before,       .ico--wifi       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5a16 16 0 0 1 20 0M5 12.5a11 11 0 0 1 14 0M8.5 16a6 6 0 0 1 7 0'/%3E%3Cpath d='M12 20h.01M3 3l18 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5a16 16 0 0 1 20 0M5 12.5a11 11 0 0 1 14 0M8.5 16a6 6 0 0 1 7 0'/%3E%3Cpath d='M12 20h.01M3 3l18 18'/%3E%3C/svg%3E"); }

/* ---------- 19.6 Boutons ------------------------------------------- */
.btn {
  background: linear-gradient(150deg, #FF6A3D, var(--ember) 55%, #E63C11);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px rgba(252, 95, 6, .3);
}
.btn:hover { background: linear-gradient(150deg, #FF7A50, #FF521F 55%, #EC4114); }

/* ---------- 19.7 Chiffres ------------------------------------------ */
.stat {
  border-radius: 20px;
  background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.09);
}
.stat:hover { background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.03)); }

/* ---------- 19.8 Titres de section --------------------------------- */
/* Petit trait sous les titres centres : cadence la lecture. */
.text-center > h2::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin: 1.1rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ember), var(--ember-2));
}

/* ---------- 19.9 Capture ------------------------------------------- */
.shot { border-radius: 20px; }
.shot__bar { background: linear-gradient(#F7F8FA, #EEF0F4); }
.section--noir .shot__bar,
.section--taupe .shot__bar { background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.02)); }

/* ---------- 19.10 Index des cartes numerotees ----------------------- */
/* Sur les cartes a icone, le numero passe en index discret dans le coin :
   sinon on empile numero + pastille + titre, et la carte a trois departs
   de lecture. Les cartes SANS icone (Avant / Pendant / Apres) gardent
   leur libelle en tete de bloc, d'ou le :has(). */
.card:has(.ico) { position: relative; }
.card:has(.ico) .card__meta {
  position: absolute;
  top: 1.45rem; right: 1.6rem;
  margin: 0;
  font-size: .72rem;
  color: var(--txt-3);
  opacity: .5;
}
.section--noir .card:has(.ico) .card__meta,
.section--taupe .card:has(.ico) .card__meta { color: var(--txt-inv-2); opacity: .45; }
.card:has(.ico) .card__body .ico { margin-bottom: 1.25rem; }

/* ---------- 19.11 Filet de securite sur l'apparition au scroll ------ */
/* .reveal part a opacity 0 et attend que incendie-main.js ajoute
   .is-visible. Si le JS ne s'execute pas (erreur, blocage, chargement
   trop lent), le contenu reste INVISIBLE POUR TOUJOURS : inacceptable
   sur un site dont le seul but est de vendre.
   Cette animation reaffiche tout au bout de 2,5 s quoi qu'il arrive.
   En navigation normale l'observateur a deja fait son travail bien
   avant, donc elle ne se voit pas. */
@keyframes reveal-secours { to { opacity: 1; transform: none; } }
.reveal { animation: reveal-secours .4s ease 2.5s forwards; }
.reveal.is-visible { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* ---------- 19.12 Logo --------------------------------------------- */
/* Logo definitif (13/10/2026) : une seule image, symbole + nom, sans la
   signature. La hauteur fixe la taille ; la largeur suit le ratio
   (545 x 112). 46 px laisse au nom une hauteur de capitales d'environ
   19 px, la taille d'un titre de menu. */
.site-logo picture { display: block; }
.site-logo__img { display: block; height: 46px; width: auto; }
@media (max-width: 680px) {
  .site-logo__img { height: 38px; }
}
/* Le logo ne doit jamais ceder sa place au menu : sans flex: none, entre
   1100 et 1260 px les 8 entrees le comprimaient en largeur et le nom se
   lisait ecrase. Sur cette plage, c'est le menu qui se resserre. */
.site-logo { flex: none; }
@media (min-width: 1101px) and (max-width: 1260px) {
  .site-header .container { gap: 1rem; }
  .site-logo__img { height: 40px; }
  .main-nav ul { gap: .1rem; }
  .main-nav a { padding: .5rem .5rem; font-size: .86rem; }
}

/* =====================================================================
   20. RYTHME VERTICAL  (11/08/2026)
   Diagnostic : .section avait clamp(4.5rem, 9vw, 8rem) haut ET bas, soit
   128 px + 128 px entre deux blocs a 1440 px. Sur des sections courtes,
   ca donnait des pages creuses -- le defaut qui faisait "brut de
   decoffrage" bien plus que la couleur.
   ===================================================================== */
.section { padding: clamp(3.25rem, 5.5vw, 5.5rem) 0; }

/* Les bandes d'appel a l'action gardent plus d'air : ce sont elles qui
   doivent respirer, pas les blocs de texte. */
.section--taupe { padding: clamp(4rem, 7vw, 7rem) 0; }

/* Premier bloc apres le bandeau de page : on rapproche, sinon le titre de
   page et le premier paragraphe n'ont plus l'air d'appartenir a la meme
   page. */
#contenu_scroller > .paragraphe:first-child .section:first-child {
  padding-top: clamp(2.25rem, 3.5vw, 3.25rem);
}

/* Deux sections qui se suivent : on evite le double padding qui creuse un
   trou au milieu d'un enchainement. */
.section + .section { padding-top: clamp(2rem, 3.5vw, 3.5rem); }

/* CORRIGE LE 12/08/2026 -- a lire avant de remettre un zero ici.
   Ces deux selecteurs mettaient la marge haute a ZERO quand deux sections
   de MEME fond se suivaient. C'etait juste tant qu'une page etait un seul
   bloc de HTML : deux sections de meme couleur cote a cote y etaient un
   accident, et les coller les faisait passer pour une seule.
   Depuis le decoupage en blocs, chaque bloc rend SA section : deux
   sections de meme fond qui se suivent sont devenues le cas NORMAL, et
   cette regle collait presque toute la page. Combinee a une section du
   dessus qui annule sa marge basse, elle ne laissait plus rien du tout --
   sur la page d'accueil, l'accroche touchait ses cartes a zero pixel.
   Elles prennent donc la meme marge que n'importe quel enchainement. */
.section--sable + .section--sable,
.section--noir + .section--noir { padding-top: clamp(2rem, 3.5vw, 3.5rem); }

/* Titres intermediaires DANS une page : le h2 pleine taille etait calibre
   pour un titre de section, pas pour un sous-titre de paragraphe. */
.narrow h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2.25rem; }
.narrow h2:first-child { margin-top: 0; }

/* ---------- 20.1 Encadre de mise au point --------------------------- */
/* Pour les passages du type "a qui ca ne s'adresse pas" : un simple
   paragraphe perdu dans du blanc n'accroche pas, alors que c'est un
   argument de qualification important. */
.note {
  border-left: 3px solid var(--ember);
  background: linear-gradient(90deg, var(--ember-soft), transparent 70%);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.8rem;
}
.note h2, .note h3 { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }

/* ---------- 20.2 Pied de page --------------------------------------- */
/* Il etait squelettique : deux colonnes flottant dans du noir. */
.site-footer { padding-top: clamp(3rem, 5vw, 4rem); }
.footer-cols { gap: 3rem; padding-bottom: 2.5rem; }
.footer-cols > div:first-child { max-width: 34ch; }
.site-footer strong { font-family: var(--font-titre); font-size: 1.15rem; letter-spacing: -.03em; }

/* ---------- 20.3 Enchainement en etapes ----------------------------- */
/* Composant .flow : explique un mecanisme en 3 temps. Apporte aussi une
   respiration visuelle -- toutes les sections etaient soit du texte
   centre, soit une grille de cartes. */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: etape;
  position: relative;
}
/* Trait de liaison entre les etapes, derriere les pastilles. */
.flow::before {
  content: "";
  position: absolute;
  top: 26px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 12%, var(--ember) 88%, transparent);
  opacity: .3;
}
.flow__etape { position: relative; }
.flow__etape::before {
  counter-increment: etape;
  content: counter(etape);
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  font-family: var(--font-titre);
  font-weight: 700; font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(150deg, var(--ember-2), var(--ember) 60%, #F83A08);
  box-shadow: 0 6px 18px rgba(252, 95, 6, .3);
  position: relative; z-index: 1;
}
.flow__etape h3 { margin-bottom: .5rem; }
.flow__etape p { color: var(--txt-2); font-size: .97rem; margin-bottom: 0; }
.section--noir .flow__etape p,
.section--taupe .flow__etape p { color: var(--txt-inv-2); }
.section--noir .flow::before,
.section--taupe .flow::before { opacity: .45; }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .flow::before { display: none; }
  .flow__etape::before { margin-bottom: .9rem; }
}

/* =====================================================================
   21. APPARITION AU SCROLL - REPRISE COMPLETE  (11/08/2026)

   Etat precedent : .reveal partait a opacity 0 et attendait que
   incendie-main.js pose .is-visible. J'avais ajoute une animation de
   secours a 2,5 s, et je l'ai TESTEE : page rendue sans le script du
   site, opacite mesuree a 0 apres 4,2 s. Le filet ne tenait pas.

   Principe correct : on ne cache JAMAIS par defaut. L'etat masque n'est
   applique que si le navigateur declare savoir executer du script
   (media query "scripting"). Trois cas couverts :
     - pas de script du tout      -> contenu visible, aucune animation ;
     - script actif mais fichier JS casse -> l'animation de secours
       reaffiche au bout de 2,5 s ;
     - fonctionnement normal      -> l'observateur pose .is-visible.

   Regle a retenir : sur un site dont le but est de vendre, aucun
   contenu ne doit dependre du JS pour etre simplement LISIBLE.
   ===================================================================== */
.reveal { opacity: 1; transform: none; transition: none; animation: none; }

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
    animation: reveal-secours .4s ease 2.5s forwards;
  }
  .reveal.is-visible { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- 21.1 Plan du site --------------------------------------- */
/* Le module MDL_PLAN_SITE embarquait son PROPRE bloc <style> (retire du
   module le 11/08/2026) : fond gris sur le lien de niveau 0, font-size
   45px, et un display:flex impose avec DEUX identifiants
   (#centreetdroite #plansite .bloc1) qu'aucune regle de cette feuille ne
   pouvait depasser proprement. La mise en forme vit desormais ici. */
#plansite {
  list-style: none;
  max-width: var(--container);
  margin: clamp(3rem, 5vw, 4.5rem) auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
}
#plansite ul { list-style: none; margin: 0; padding: 0; }

#plansite > .niveau0 > a {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--txt);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: 0 0 1rem;
  margin-bottom: .5rem;
}
#plansite > .niveau0 > a:hover { color: var(--ember); }

#plansite .bloc1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .2rem 2.5rem;
}
#plansite .niveau1 { border-bottom: 1px solid var(--line-2); width: auto; float: none; }
#plansite .niveau1 a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem .4rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--txt-2);
  transition: color var(--transition), padding-left var(--transition);
}
#plansite .niveau1 a::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 6px;
  border-right: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg);
}
#plansite .niveau1 a:hover { color: var(--ember); padding-left: 1rem; }

/* ---------- 21.2 Pages utilitaires ---------------------------------- */
/* Sur le plan du site et les mentions legales, la meta description est
   reprise en sous-titre du bandeau et ne fait que repeter le titre
   ("Plan du site" / "Plan du site."). On masque le sous-titre sans
   toucher a la balise meta, qui reste utile au referencement.
   La classe vient de index.php : 'page-' + code PGS en minuscules. */
.page-plan_site .page-header__sub,
.page-mention .page-header__sub { display: none; }

/* ---------- 21.3 Pied de page : troisieme colonne -------------------- */
/* Il n'avait que deux colonnes et laissait la moitie droite vide. La
   troisieme porte l'appel a l'action : le pied de page est la derniere
   surface de conversion de chaque page. */
.footer-cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.footer-cta h4 { margin-bottom: .8rem; }
.footer-cta p { margin-bottom: 1.1rem; max-width: 34ch; }
.footer-cta .btn { padding: .8rem 1.5rem; font-size: .88rem; }
.footer-cta .btn:hover { color: #fff; }

@media (max-width: 680px) {
  #plansite .bloc1 { grid-template-columns: 1fr; }
}

/* .site-footer a impose la couleur des liens du pied de page et l'emporte
   sur .btn : le libelle du bouton sortait en gris sur orange. */
.footer-cta .btn, .site-footer a.btn { color: #fff; }

/* =====================================================================
   22. ACCORDEON DE LA FAQ  (module MDL_BILLET_LISTE_TOGGLE)
   Porte du projet pudu : chaque question est un billet, editable au
   back-office. Le module emet des classes heritees (.list_actu,
   .block_list_actu, .title_actu...) qu'on ne peut pas renommer sans
   toucher au PHP -- on les style telles quelles.
   Le depliement est pilote par le JavaScript embarque dans le module :
   il bascule le display de .content_actu et permute le + / -.
   ===================================================================== */
.list_actu.toggle_actu {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: .9rem;
}

.block_list_actu {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.block_list_actu:hover { border-color: rgba(252, 95, 6, .3); }

/* La ligne cliquable : question a gauche, bouton a droite. */
.title_actu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  user-select: none;
}
.title_actu h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--txt);
  line-height: 1.4;
}
.title_actu:hover h4 { color: var(--ember); }

/* Le + / - : pastille ronde, le glyphe vient du PHP (texte, pas une icone). */
.toggle_btn {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ember-soft);
  color: var(--ember);
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.title_actu:hover .toggle_btn { background: var(--ember); color: #fff; }

/* La reponse. Le module la garde en display:none jusqu'au clic, donc pas
   d'animation de hauteur possible ici -- on soigne l'espacement. */
.content_actu {
  padding: 0 1.5rem 1.4rem;
  border-top: 1px solid var(--line-2);
}
.content_actu .desc_actu { padding-top: 1.2rem; }
.content_actu p {
  color: var(--txt-2);
  font-size: .98rem;
  line-height: 1.65;
  margin-bottom: .9rem;
}
.content_actu p:last-child { margin-bottom: 0; }
.content_actu strong { color: var(--txt); }

@media (max-width: 680px) {
  .title_actu { padding: 1.05rem 1.1rem; gap: .8rem; }
  .title_actu h4 { font-size: .98rem; }
  .content_actu { padding: 0 1.1rem 1.2rem; }
}

/* Le titre du bandeau de page est passe de <h2> a <h1> (referencement :
   une page sans h1 se positionne mal). On reprend exactement le meme style
   pour que rien ne bouge visuellement. */
.page-header__inner h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.032em;
  margin-bottom: .9rem;
}

/* =====================================================================
   23. FICHE BILLET  (pages "une fonctionnalite = une page")
   Le module emet un simple <div class="contain_actu"> sans section ni
   conteneur : sans style, le texte court d'un bord a l'autre de l'ecran.
   ===================================================================== */
.contain_actu {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 2.5rem);
}
.contain_actu p {
  color: var(--txt-2);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.contain_actu p:last-child { margin-bottom: 0; }
.contain_actu strong { color: var(--txt); }
.contain_actu h2, .contain_actu h3 { margin-top: 2.5rem; }

/* La date de parution : pertinente pour une actualite, pas pour une page
   produit -- elle la fait paraitre perimee des l'annee suivante. */
.contain_actu .date { display: none; }

/* Meme raison sur les cartes du hub des fonctionnalites : ce sont des pages
   produit, pas des actualites. La regle reste portee par la classe de page,
   pour qu'une vraie liste d'actualites garde ses dates. */
.page-fonction_detail .stgo-card-meta { display: none; }

/* ------------------------------------------------------------------
   24. LIEN VERS LA FICHE DETAILLEE
   Au pied d'une carte de fonctionnalite. Le libelle est le titre de la
   page cible : c'est ce texte que les moteurs associent a la cible, un
   "en savoir plus" ne leur apprend rien.
   ------------------------------------------------------------------ */
.card__more { margin: 1.1rem 0 0; }
.card__more + .card__more { margin-top: .45rem; }

.card__more a {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, gap .18s ease;
}
.card__more a::after { content: "\2192"; transition: transform .18s ease; }
.card__more a:hover { border-bottom-color: currentColor; }
.card__more a:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------
   25. SOMMAIRE DES FONCTIONNALITES
   Cartes entierement cliquables : pictogramme, titre, description
   courte, fleche. Rendues par MDL_BILLET_LISTE_FONCTION.
   ------------------------------------------------------------------ */
.card--lien {
  text-decoration: none;
  color: inherit;
  /* La carte porte deja la transition de .card ; on ajoute le decalage
     de la fleche, qui se declenche au survol de la carte entiere. */
}
.card--lien .card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 3.1rem;   /* place reservee a la fleche, en bas */
}
.card--lien h3 {
  margin: .9rem 0 .55rem;
  font-size: 1.12rem;
  line-height: 1.35;
}
.card--lien p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--txt-2);
}

/* La fleche est ancree en bas a gauche : les cartes d'une meme rangee
   ont des textes de longueurs differentes, et une fleche qui suivrait le
   texte donnerait une ligne de fuite en dents de scie. */
.card--lien .card__fleche {
  position: absolute;
  left: var(--card-pad, 1.7rem);
  bottom: 1.4rem;
  width: 22px;
  height: 2px;
  background: var(--ember);
  transition: width .22s ease;
}
.card--lien .card__fleche::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ember);
  border-right: 2px solid var(--ember);
  transform: rotate(45deg);
}
.card--lien:hover .card__fleche { width: 34px; }

.card--lien:hover,
.card--lien:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
  border-color: rgba(240, 90, 34, .35);
}
.card--lien:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ------------------------------------------------------------------
   26. BARRE D'OUTILS DU BACK-OFFICE
   Quand un administrateur navigue sur le site, le CMS injecte ses
   propres commandes DANS la page : elles heritent donc de cette
   feuille de style.

   La regle "img { display: block }" de la section 1 -- posee pour
   supprimer l'espace sous les images du site -- casse ces barres : leurs
   boutons sont des <a> contenant une <img>, et une image en bloc force
   chaque lien a la ligne. Les commandes s'empilaient donc verticalement.

   On rend leur affichage en ligne a ces images-la seulement. Le reste du
   site garde le comportement voulu.
   ------------------------------------------------------------------ */
.bo_barre_boutons img,
.bo_paragraphe img,
#backoffice_menu_haut img {
  display: inline-block;
  vertical-align: middle;
}
.bo_barre_boutons { display: block; }
.bo_barre_boutons a { display: inline; }


/* ------------------------------------------------------------------
   27. TEMOIGNAGES CLIENTS
   Rendus par MDL_TEMOIGNAGE_LISTE, branche sur lib.temoignage_incerp.
   ------------------------------------------------------------------ */
.temoignages__liste { margin-top: 2.6rem; align-items: stretch; }

.temoignage {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2rem 1.8rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
}
/* Guillemet ouvrant en filigrane : marque la citation sans alourdir */
.temoignage::before {
  content: "\201C";
  position: absolute;
  top: .1rem;
  left: 1.3rem;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--ember);
  opacity: .18;
}
.temoignage blockquote {
  margin: 0 0 1.4rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--txt);
}
.temoignage blockquote p:last-child { margin-bottom: 0; }

.temoignage figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.temoignage__nom  { font-weight: 700; font-size: .95rem; color: var(--txt); }
.temoignage__role { font-size: .88rem; color: var(--txt-2); }

/* ------------------------------------------------------------------
   28. BANDE BLANCHE ENTRE LES SECTIONS
   Le CMS separe les paragraphes par <br class="clr">, une classe definie
   dans sa feuille generique (css/style.css) que notre site ne charge pas.
   Le <br> se retrouve donc sans style et produit une ligne vide, sans
   fond, entre deux sections qui, elles, sont colorees : d'ou une bande
   BLANCHE de 28 px a chaque couture -- criante entre une section sombre
   et la suivante.

   Mesure a l'appui : la section sombre s'arretait a y=2244, la bande
   blanche courait jusqu'a 2272, la section suivante ne demarrait qu'a
   2273. Une fois le <br> neutralise, les deux se touchent.

   On lui retire sa hauteur en lui laissant "clear", pour que son role
   d'origine -- purger les flottants -- serait preserve.

   Teste : "display:block; height:0" ne suffit PAS -- le <br> conserve sa
   ligne et la bande reste. Seul display:none la supprime. Le role de
   nettoyage de flottants est sans objet ici : la mise en page du site
   n'utilise que flex et grid, aucun flottant.
   ------------------------------------------------------------------ */
br.clr { display: none; }

/* Le titre d'une carte de fonctionnalite porte le lien vers sa fiche.
   Il garde la couleur du titre : c'est la carte entiere qui reagit au
   survol, pas le seul texte -- sinon deux signaux concurrents. */
.card h3 .card__lien {
  color: inherit;
  text-decoration: none;
}
.card:hover h3 .card__lien { color: var(--ember); }
.card h3 .card__lien::after {
  content: " \2192";
  color: var(--ember);
  opacity: .75;
}

/* ------------------------------------------------------------------
   29. CAPTURES D'ECRAN DANS UNE COLONNE D'ILLUSTRATION

   .split__media img recadre en 4/3 avec object-fit: cover. C'est la
   bonne regle pour une PHOTO d'illustration, dont on se moque de perdre
   les bords.

   Appliquee a une CAPTURE, elle est destructrice : de l'ecran vertical
   d'un telephone, elle ne laissait voir qu'une bande horizontale prise
   au milieu -- ni le haut de l'ecran, ni le bouton du bas. C'est ce qui
   rendait la capture du registre de securite illisible : le fichier
   etait bon, c'est l'affichage qui en montrait le quart.

   Une capture est encadree par .shot : on la reconnait a cela, et on la
   montre ENTIERE. Les arrondis et l'ombre sont retires de l'image parce
   que le cadre les porte deja.
   ------------------------------------------------------------------ */
.split__media .shot img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   30. SECTION QUI EN CONTINUE UNE AUTRE

   Le rythme normal du site est genereux : .section pose environ 126 px
   en haut et autant en bas, soit ~250 px entre deux sections.

   Certaines sections ne sont pas des sections a part entiere : ce sont
   la SUITE de celle qui precede -- l'intro d'une page et les cartes qui
   la detaillent, un chapeau et la capture qui l'illustre. Le rythme
   complet les separerait a tort.

   Jusqu'ici, chacune reglait le probleme dans son coin, en annulant sa
   propre marge (padding-top:0) ou en la reduisant (3rem). Depuis le
   decoupage en blocs, ces reglages se rencontrent : quand la section du
   dessus annule DEJA sa marge du bas, deux annulations se cumulent et
   il ne reste plus rien -- le titre "Les modules du logiciel" se
   retrouvait colle au bouton qui le precede, a zero pixel.

   D'ou cette classe : une seule valeur, a un endroit, pour toutes les
   suites. Environ 80 px : nettement moins que le rythme plein, assez
   pour que les deux sections restent distinctes meme si celle du dessus
   n'a plus de marge basse.
   ------------------------------------------------------------------ */
/* Ecrit .section.section--suite, et non .section--suite seul : la section
   20 regle deja la marge des enchainements par des selecteurs a deux
   classes (.section--sable + .section--sable). A une seule classe, cette
   regle-ci perdait contre eux et ne servait a rien. */
.section.section--suite { padding-top: clamp(3rem, 6vw, 5rem); }

/* ------------------------------------------------------------------
   31. BANDEAU DE FIN SUR UNE FICHE

   Le corps d'une fiche est rendu dans .contain_actu, une colonne de
   820 px centree. Le bandeau d'appel a l'action ajoute en fin de fiche
   s'y retrouvait enferme : encadre de blanc des deux cotes, alors que
   le meme bandeau court d'un bord a l'autre sur toutes les autres
   pages. Deux traitements pour un meme element, c'est ce qui se voit.

   Il sort donc de la colonne. La marge negative en pourcentage-moins-
   vw est la sortie de conteneur habituelle ; elle est sans risque ici
   parce que body porte deja overflow-x: hidden (section 2), sans quoi
   la largeur de la barre de defilement creerait un debordement
   horizontal sur toute la page.
   ------------------------------------------------------------------ */
.contain_actu > .section--taupe,
.contain_actu > .section--noir {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(1.2rem, 4vw, 2.5rem);
  padding-right: clamp(1.2rem, 4vw, 2.5rem);
}

/* La colonne pose deja une marge basse : cumulee au bandeau, elle
   laissait un blanc avant le pied de page. */
.contain_actu:has(> .section--taupe:last-child),
.contain_actu:has(> .section--noir:last-child) { padding-bottom: 0; }

/* ------------------------------------------------------------------
   32. UN MODULE RENDU HORS SECTION N'A PAS DE MARGE BASSE

   Certains modules sont rendus par le CMS hors de toute <section> :
   l'accordeon des questions frequentes (.list_actu) et le formulaire de
   demande de demonstration (.mdl_formulaire). Ils n'ont donc ni la marge
   basse d'une section, ni le rythme d'enchainement de la section 20, et
   se collent a ce qui les suit -- la bande sombre pour l'un, le pied de
   page pour l'autre. Les deux ont ete signales a l'ecran.

   Aucune mesure ne les voyait : mesurer_sections.py ne compare que des
   sections entre elles, et le pied de page n'en est pas une. D'ou
   mesurer_pied.py, qui mesure l'ecart entre le dernier element PEINT
   d'une page et son pied.

   Les deux selecteurs portent deux classes : les regles d'origine
   (sections 19 et 12) posent "margin: 0 auto" sur les memes elements, et
   le raccourci margin remet la marge basse a zero. A une seule classe,
   la regle d'ici perdait la priorite.
   ------------------------------------------------------------------ */
/* Ecrit .list_actu.toggle_actu : la regle de la section 19 pose
   "margin: 0 auto" sur ce meme selecteur a deux classes. A une seule
   classe, la marge d'ici perdait la priorite -- et le raccourci margin
   remettait la marge basse a zero. Verifie : marginBottom valait bien
   0px avant correction. */
.list_actu.toggle_actu,
.paragraphe > .mdl_formulaire { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ------------------------------------------------------------------
   33. MISE EN VALEUR DANS UNE SECTION SOMBRE

   La section 3 pose "strong { color: var(--txt) }" -- une couleur
   SOMBRE, pour que le gras ressorte sur fond clair. Cette regle
   s'applique aussi dans les sections sombres, ou le paragraphe est
   clair (section 6) : le gras y devenait noir sur noir, donc
   illisible. Constate sur la page Application terrain, ou "en temps
   reel" disparaissait purement et simplement.

   L'heritage ne suffit pas a corriger : une declaration de couleur sur
   l'element lui-meme l'emporte toujours sur la couleur heritee du
   parent, quelle que soit la specificite de ce parent.

   Le gras prend donc la teinte claire VIVE, plus lumineuse que le
   paragraphe qui l'entoure : c'est le role du gras de ressortir.
   ------------------------------------------------------------------ */
.section--taupe strong,
.section--noir strong { color: var(--txt-inv); }

/* ------------------------------------------------------------------
   34. CHAMP PIEGE ANTI-ROBOT DES FORMULAIRES  (13/10/2026)
   Hors ecran plutot que display:none : certains robots ignorent les
   champs masques, aucun ne calcule une position. aria-hidden et
   tabindex=-1 (dans le HTML) l'ecartent des lecteurs d'ecran et du
   clavier. Voir mdl_formulaire.php.
   ------------------------------------------------------------------ */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =====================================================================
   35. CHARTE DE LA PLAQUETTE INCERP  (14/10/2026)
   La planche de Stephane (logo, pictos, valeurs, concept) devient la
   reference visuelle, SANS SON BLEU (decision TJ) : anthracite + orange
   et rouge de la flamme. Ce qui change :
   - plus de halos vert et violet : seules les teintes de la flamme ;
   - le quadrillage des fonds sombres cede la place au motif "pixels" du
     logo (le flux de donnees) ;
   - pictos pleins, anthracite (blancs sur fond sombre), flamme orange ;
   - sur-titres en capitales espacees, comme la signature du logo, avec un
     carre "pixel" a la place de la pastille ronde.
   ===================================================================== */

/* ---------- 35.1 Palette : la flamme seulement -------------------- */
.section--noir::after,
.section--taupe::after {
  background: radial-gradient(closest-side, rgba(248, 58, 8, .12), transparent 70%);
}
.section--sable {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(252, 95, 6, .05), transparent 70%),
    radial-gradient(50% 50% at 90% 100%, rgba(248, 58, 8, .04), transparent 70%),
    var(--paper);
}
.hero-slider {
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(252, 95, 6, .34), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(248, 58, 8, .14), transparent 62%),
    linear-gradient(168deg, #10131A 0%, var(--ink) 60%);
}

/* ---------- 35.2 Motif "pixels" ----------------------------------- */
/* Les carres qui precedent le ruban du logo. Pose en coin, jamais sous
   le texte : en mobile il retrecit, et disparait sous 480 px. */
/* Pas dans .section--noir : ces sections portent des grilles pleine
   largeur (chiffres, etapes) que le motif chevauchait. */
.section--taupe {
  background:
    url("../images/interface/motif_pixels.svg") no-repeat right 4% top 36px / 150px auto,
    linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 65%);
}
.hero-slider__track::before {
  background: url("../images/interface/motif_pixels.svg") no-repeat right 5% top 16% / 190px auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.page-header::after {
  background: url("../images/interface/motif_pixels.svg") no-repeat right 5% top 28px / 150px auto;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 860px) {
  .section--taupe { background-size: 96px auto, auto; }
  .hero-slider__track::before, .page-header::after { background-size: 110px auto; }
}
@media (max-width: 480px) {
  .section--taupe { background: linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 65%); }
  .hero-slider__track::before, .page-header::after { background: none; }
}

/* ---------- 35.3 Sur-titres --------------------------------------- */
/* Comme la signature du logo : capitales espacees, sans pastille. */
.kicker,
.section--taupe .kicker,
.section--noir .kicker,
.hero-slider .kicker,
.page-header .kicker {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  letter-spacing: .16em;
}
.kicker::before {
  width: 8px; height: 8px;
  border-radius: 1px;
  box-shadow: 5px -5px 0 -1px rgba(252, 95, 6, .35);
}

/* ---------- 35.4 Pictos de la plaquette --------------------------- */
/* SVG en masque, ECRITS EN DATA URI (sources : images/interface/pictos/).
   Un masque charge par URL suit les regles CORS : servi depuis un autre
   domaine (CDN, copie locale), il ne s'affiche pas. La couleur vient du
   fond : une seule definition pour fond clair et sombre. */
.picto {
  display: inline-block;
  flex: none;
  width: 44px; height: 44px;
  background-color: var(--txt);
  -webkit-mask: var(--picto) center / contain no-repeat;
  mask: var(--picto) center / contain no-repeat;
}
.picto--infini    { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 42 42'%3E%3Cpath d='M15 16.5c-4.4 0-7.5 3.3-7.5 7.5s3.1 7.5 7.5 7.5c6.4 0 11.6-15 18-15 4.4 0 7.5 3.3 7.5 7.5s-3.1 7.5-7.5 7.5c-6.4 0-11.6-15-18-15z' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.picto--engrenage { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M39.44 19.10L44.59 19.85L44.59 28.15L39.44 28.90L38.38 31.46L41.49 35.63L35.63 41.49L31.46 38.38L28.90 39.44L28.15 44.59L19.85 44.59L19.10 39.44L16.54 38.38L12.37 41.49L6.51 35.63L9.62 31.46L8.56 28.90L3.41 28.15L3.41 19.85L8.56 19.10L9.62 16.54L6.51 12.37L12.37 6.51L16.54 9.62L19.10 8.56L19.85 3.41L28.15 3.41L28.90 8.56L31.46 9.62L35.63 6.51L41.49 12.37L38.38 16.54ZM30.4 24a6.4 6.4 0 1 0 -12.8 0a6.4 6.4 0 1 0 12.8 0z'/%3E%3C/svg%3E"); }
.picto--barres    { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 31h8v11H7zM20 21h8v21h-8zM33 9h8v33h-8z'/%3E%3C/svg%3E"); }
.picto--bouclier  { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M24 3l17 6.5v12.3C41 33 33.8 42.2 24 45 14.2 42.2 7 33 7 21.8V9.5zM21.3 31.6l-6.6-6.6 3-3 3.6 3.6 9-9 3 3z'/%3E%3C/svg%3E"); }
.picto--flamme    {
  --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M25.5 3c1.6 6.6-2.3 9.8-2.3 14.6 0 2.6 1.6 4.2 3.6 4.2 2.9 0 4.1-2.9 3.2-6.2C35.6 19 40 25.4 40 31.6 40 39.9 33 46 24 46S8 39.9 8 31.6C8 21.4 18.6 15.4 25.5 3zM24.2 29.5c-2.6 3.1-5.2 5-5.2 8.6 0 3 2.3 5.3 5.2 5.3s5.3-2.3 5.3-5.3c0-2.9-1.8-4.7-3.4-7.4-.5 1.9-1.4 2.9-2.3 2.9-.8 0-1.1-1.6.4-4.1z'/%3E%3C/svg%3E");
  background-color: transparent;
  background-image: linear-gradient(170deg, var(--ember-2) 0%, var(--ember) 55%, #F83A08 100%);
}
.section--noir .picto:not(.picto--flamme),
.section--taupe .picto:not(.picto--flamme) { background-color: #fff; }

/* Cartes : le pictogramme seul, plein, sans pastille orange. */
.card__body .ico {
  width: 44px; height: 44px;
  justify-content: flex-start;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}
.card__body .ico::before { width: 40px; height: 40px; background-color: var(--txt); }
.section--noir .card__body .ico::before,
.section--taupe .card__body .ico::before { background-color: #fff; }

/* ---------- 35.5 Les quatre promesses (accueil) ------------------- */
.promesses {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem 2rem;
}
.promesses li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--txt);
}
/* La bande suit l'introduction dans la meme respiration : la marge
   haute d'une section de suite (3 a 5 rem) l'en detachait trop. */
.section.section--promesses { padding-top: .5rem; }
@media (max-width: 1024px) { .promesses { grid-template-columns: repeat(2, 1fr); max-width: 620px; } }
@media (max-width: 480px)  { .promesses { grid-template-columns: 1fr; max-width: 300px; } }

/* ---------- 35.6 Explication du concept (L'editeur) --------------- */
.concept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.concept__visuel img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.concept__liste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.concept__liste li {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 1rem;
}
.concept__liste li::before {
  content: "";
  grid-row: span 2;
  width: 12px; height: 12px;
  margin-top: .45rem;
  border-radius: 2px;
  background: var(--ember);
}
.concept__liste strong { color: var(--txt); font-size: 1.05rem; }
.concept__liste span { color: var(--txt-2); }
@media (max-width: 860px) { .concept { grid-template-columns: 1fr; } }

/* ---------- 35.7 Les valeurs transmises (L'editeur) --------------- */
.valeurs {
  list-style: none;
  margin: 2.6rem auto 0;
  padding: 2rem clamp(1rem, 3vw, 2.5rem);
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.valeurs li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
.valeurs .picto { width: 40px; height: 40px; margin-bottom: .35rem; }
.valeurs strong { font-family: var(--font-titre); font-size: 1.1rem; color: var(--txt); }
.valeurs span { font-size: .92rem; color: var(--txt-2); line-height: 1.45; }
@media (max-width: 860px) { .valeurs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .valeurs { grid-template-columns: 1fr; } }

/* =====================================================================
   36. BLOCS HARMONISES SUR LA PLAQUETTE  (14/10/2026)
   La planche range tout dans des PANNEAUX : fond clair, filet fin, coins
   de 14 px, aucune ombre portee, et des filets verticaux entre les
   elements d'une meme rangee. Les blocs du site parlaient un autre
   vocabulaire : ombres profondes, coins de 20 a 24 px, soulevement et
   lisere orange au survol, pastilles rondes. Un seul jeu de valeurs pour
   tous les blocs : cartes, chiffres, etapes, captures, FAQ, formulaire.
   ===================================================================== */
:root {
  --panneau-rayon: 14px;
  --panneau-filet: 1px solid #E3E6EB;
  --panneau-filet-sombre: 1px solid rgba(255, 255, 255, .10);
  --panneau-fond-doux: #F6F7F9;
}

/* ---------- 36.1 Cartes ------------------------------------------- */
.card,
.card:hover {
  border-radius: var(--panneau-rayon);
  background: var(--white);
  border: var(--panneau-filet);
  box-shadow: none;
  transform: none;
}
.card::before { display: none; }
.card:hover { border-color: rgba(252, 95, 6, .45); }
.section--noir .card,
.section--taupe .card,
.section--noir .card:hover,
.section--taupe .card:hover {
  background: rgba(255, 255, 255, .035);
  border: var(--panneau-filet-sombre);
}
.section--noir .card:hover,
.section--taupe .card:hover { border-color: rgba(251, 136, 20, .45); }
.card__meta { letter-spacing: .16em; }

/* ---------- 36.2 Chiffres ----------------------------------------- */
.stat,
.stat:hover {
  border-radius: var(--panneau-rayon);
  background: rgba(255, 255, 255, .03);
  border: var(--panneau-filet-sombre);
  transform: none;
}
.stat:hover { border-color: rgba(251, 136, 20, .35); }
.stat__label { letter-spacing: .14em; font-size: .8rem; }

/* ---------- 36.3 Etapes : carres "pixel" plutot que pastilles ------ */
.flow__etape::before {
  width: 48px; height: 48px;
  border-radius: 10px;
  box-shadow: none;
}
.flow::before { top: 24px; }

/* ---------- 36.4 Captures ----------------------------------------- */
/* Une capture garde une ombre douce : c'est un ecran pose sur la page,
   pas un panneau. Mais plus de soulevement au survol. */
.shot,
.shot:hover {
  border-radius: var(--panneau-rayon);
  box-shadow: 0 1px 2px rgba(12, 18, 32, .05), 0 18px 40px rgba(12, 18, 32, .10);
  transform: none;
}

/* ---------- 36.5 FAQ et formulaire -------------------------------- */
.block_list_actu { border-radius: var(--panneau-rayon); border: var(--panneau-filet); }
.mdl_formulaire {
  border-radius: var(--panneau-rayon);
  border: var(--panneau-filet);
  background: var(--panneau-fond-doux);
  box-shadow: none;
}

/* ---------- 36.6 Promesses, valeurs, concept ---------------------- */
/* Filets verticaux entre les elements, comme sur la planche. */
@media (min-width: 1025px) {
  .promesses li + li { border-left: var(--panneau-filet); padding-left: 2rem; }
}
.valeurs {
  border-radius: var(--panneau-rayon);
  border: var(--panneau-filet);
  background: var(--panneau-fond-doux);
  box-shadow: none;
}
@media (min-width: 861px) {
  .valeurs li + li { border-left: var(--panneau-filet); }
}
/* Le concept dans son panneau, comme l'encadre de la planche. */
.concept {
  background: var(--white);
  border: var(--panneau-filet);
  border-radius: var(--panneau-rayon);
  padding: clamp(1.6rem, 4vw, 3rem);
}
/* Sur le panneau gris clair du formulaire, des champs gris se lisaient
   mal : ils repassent en blanc, le filet suffit a les delimiter. */
.mdl_formulaire input[type="text"],
.mdl_formulaire input[type="email"],
.mdl_formulaire input[type="tel"],
.mdl_formulaire textarea,
.mdl_formulaire select { background-color: #fff; }

/* =====================================================================
   37. Donnees personnelles (15/10/2026)
   .form-mention : sous le bouton du formulaire de demonstration, a quoi
   servent les donnees, avec le lien vers la politique de confidentialite.
   .small : date de mise a jour en bas de la politique.
   ===================================================================== */
.form-mention {
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--txt-3);
}
.form-mention a { color: inherit; text-decoration: underline; }
.section p.small { font-size: .85rem; color: var(--txt-3); }

/* =====================================================================
   38. Captures en <picture> (15/10/2026, migration 39)
   WebP + PNG de secours. <picture> est en ligne par defaut : en bloc, pas
   de jour sous l'image dans le cadre navigateur ou telephone.
   ===================================================================== */
.shot__body picture { display: block; }

/* =====================================================================
   39. Bandeau des cookies (tarteaucitron, 15/10/2026)
   Aux couleurs du site. "Tout accepter" et "Tout refuser" ont EXACTEMENT
   la meme apparence : la CNIL demande que refuser soit aussi simple
   qu'accepter (le vert et le rouge par defaut poussaient a accepter).
   Prefixe html body : passer devant les regles de tarteaucitron.css, dont
   certaines sont en !important.
   ===================================================================== */
html body #tarteaucitronRoot * { font-family: var(--font-txt) !important; }
html body #tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 28px 32px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  font-size: 15px !important;
  line-height: 1.55;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  background: var(--ember) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 22px !important;
  margin: 14px 6px 0 !important;
  font-size: 15px !important;
  font-weight: 700;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 9px 20px !important;
  margin: 14px 6px 0 !important;
  font-size: 15px !important;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  display: block;
  margin-top: 12px;
  text-align: center;
  background: none !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
  text-decoration: underline;
}

/* =====================================================================
   40. Contenus du cahier des charges (15/10/2026, migration 41)
   .domaines   Fonctionnalites : les 19 modules ranges par domaine.
   .flow--deux-rangs  6 etapes sur 2 rangees : le trait qui relie les
               numeros ne traverserait que la premiere, on le retire.
   .hors-ligne Application terrain : l'encart sous les etapes.
   ===================================================================== */
.domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.domaine {
  background: var(--panneau-fond-doux);
  border: var(--panneau-filet);
  border-radius: var(--panneau-rayon);
  padding: 1.3rem 1.4rem 1rem;
}
.domaine h3 { font-size: 1.02rem; margin-bottom: .6rem; }
.domaine ul { list-style: none; margin: 0; padding: 0; }
.domaine li { padding: .38rem 0; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.4; }
.domaine li:first-child { border-top: 0; }
.domaine a { color: var(--txt); text-decoration: none; }
.domaine a:hover { color: var(--ember); }

.flow--deux-rangs { row-gap: 2.6rem; }
.flow--deux-rangs::before { display: none; }

.hors-ligne { margin-top: 3.2rem; }
.hors-ligne h3 { margin-bottom: .5rem; }
.section--noir .hors-ligne p { color: var(--txt-inv-2); }

/* =====================================================================
   41. FAQ rangee par themes (15/10/2026, migration 42)
   Intertitre pose par le module en accordeon a chaque changement de
   sous-categorie.
   ===================================================================== */
.toggle_actu .faq-theme {
  margin: 3rem 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--ember);
  display: inline-block;
  font-size: 1.2rem;
}
.toggle_actu .faq-theme:first-child { margin-top: 0; }

/* =====================================================================
   42. Liens des questions de FAQ (15/10/2026)
   Le titre d'une question dans l'accordeon est un lien vers sa page (le
   clic simple ouvre toujours la reponse) ; sur la page d'une question,
   .faq-voisines liste les autres questions du theme et renvoie a la FAQ.
   ===================================================================== */
.toggle_actu .title_actu h4 a { color: inherit; text-decoration: none; }
.faq-voisines {
  margin: 2.5rem 0 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--panneau-fond-doux);
  border: var(--panneau-filet);
  border-radius: var(--panneau-rayon);
}
.faq-voisines h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.faq-voisines ul { margin: 0 0 .9rem; padding-left: 1.1rem; }
.faq-voisines li { margin: .35rem 0; }
.faq-voisines a { color: var(--txt); }
.faq-voisines a:hover { color: var(--ember); }
.faq-voisines__tout { margin: 0; font-weight: 600; }

/* =====================================================================
   43. Marge laterale du bandeau d'accueil sur petit ecran (16/10/2026)
   .hero-slider__inner remet a 0 la marge horizontale de .container : sur
   ordinateur le bloc de 780 px est centre et rien ne se voit, mais sous
   860 px le titre et le texte collaient au bord de l'ecran.
   ===================================================================== */
@media (max-width: 859px) {
  .hero-slider__inner {
    padding-left: clamp(1.2rem, 4vw, 2.5rem);
    padding-right: clamp(1.2rem, 4vw, 2.5rem);
  }
}