/* =========================================================
   Jean-Rode Timolus, IA et automatisation pour TPE et PME
   Charte : une famille de caracteres, fond uni, couleurs sobres,
   beaucoup d'espace, pas d'animation decorative.

   1. Une seule famille : Schibsted Grotesk 400/600/800.
      La hierarchie vient des tailles et des espaces.
   2. Un fond uni sur tout le site. Les sections se separent par
      l'espace et par un filet, jamais par un aplat de couleur.
   3. Peu d'arrondi (6 px), pas d'ombre portee.
   4. Le vert est rare : il marque l'action et rien d'autre.
   ========================================================= */

:root{
  color-scheme:light;
  --fond:#EEE7DA;
  --fond-2:#F8F4EC;
  --carte:var(--fond);
  --champ:#FFFFFF;
  --attente:#E0D7C7;

  --encre:#15181B;
  --encre-2:#444B51;
  --encre-3:#596066;

  --vert:#1F4A3D;
  --vert-fonce:#163A30;
  --vert-pale:#DCE6E0;
  --laiton:#74561F;

  /* Icones duotone : un corps colore (--ic-corps) et un trait sombre (--ic-trait) */
  --touche:#B4532A;
  --touche-clair:#F2B48F;
  --touche-pale:#F2D6C6;
  --ic-trait:var(--vert);
  --ic-corps:#EBA882;

  --ligne:#DACFBE;
  --rayon:6px;
  --max:none;
  --marge:clamp(20px, 2.5vw, 40px);
  --entete:72px;
}

@font-face{ font-family:'Schibsted'; font-style:normal; font-weight:400; font-display:swap; src:url('/police/schibsted-400.woff2') format('woff2') }
@font-face{ font-family:'Schibsted'; font-style:normal; font-weight:600; font-display:swap; src:url('/police/schibsted-600.woff2') format('woff2') }
@font-face{ font-family:'Schibsted'; font-style:normal; font-weight:800; font-display:swap; src:url('/police/schibsted-800.woff2') format('woff2') }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--fond) }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'Schibsted', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.ico{ width:22px; height:22px; flex:none; fill:none; stroke:none }
/* Sur fond vert : trait blanc, detail peche */
.btn, .wa-flottant{ --ic-trait:#fff; --ic-corps:var(--touche-clair) }
a{ color:inherit }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--marge) }
/* Sur grand ecran, les grilles s'etirent ; les textes gardent une largeur lisible */
@media (min-width:1600px){ .metiers{ grid-template-columns:repeat(3, 1fr); gap:40px 36px } }
.evitement{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--vert); color:#fff; padding:10px 16px; border-radius:var(--rayon); text-decoration:none; font-weight:800 }
.evitement:focus{ left:8px }

/* ---------- Typographie ---------- */
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-0.022em; line-height:1.08; text-wrap:balance }
h1{ font-size:clamp(36px, 5.6vw, 68px); max-width:18em }
h1 span{ display:block; color:var(--encre-2) }
h2{ font-size:clamp(28px, 3.8vw, 44px); max-width:20em }
h3{ font-size:clamp(18px, 2vw, 21px); letter-spacing:-0.012em; line-height:1.25 }
p{ margin:0 }
strong{ font-weight:800; color:var(--encre) }
.oeil{ font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--laiton); margin-bottom:18px }
.intro{ font-size:clamp(17px, 1.9vw, 19.5px); line-height:1.55; color:var(--encre-2); max-width:34em }
.tete{ max-width:46em }
.tete .intro{ margin-top:20px }
.conclusion{ font-size:clamp(18px, 2vw, 21px); line-height:1.4; letter-spacing:-0.01em; max-width:30em }

section{ padding-block:clamp(64px, 9vw, 120px); border-top:1px solid var(--ligne) }
/* Alternance des fonds : blanc, sable a motif de points, vert profond */
section.blanc{ background:#fff; border-top:none }
section.sable{ background:var(--fond); border-top:none }
section.points{ background-image:radial-gradient(rgba(31,74,61,.16) 1.1px, transparent 1.3px); background-size:22px 22px }
section.sombre{ background:var(--vert); color:#fff; border-top:none; --ligne:rgba(255,255,255,.18); --ic-trait:#fff; --ic-corps:var(--touche-clair) }
section.sombre .oeil, section.sombre .num{ color:var(--touche-clair) }
section.sombre h2, section.sombre h3, section.sombre strong{ color:#fff }
section.sombre p{ color:rgba(255,255,255,.84) }
section.sombre .manifeste{ color:#fff }
section.sombre .etapes li{ border-color:rgba(255,255,255,.18) }
section.sombre .etapes{ border-top-color:rgba(255,255,255,.18) }
/* Tuiles d'icones */
.tuile{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:14px; flex:none;
  --t-haut:#DFEDE4; --t-bas:#BDD9CA; --t-corps:#4F9A7A; --t-trait:#163A30; --t-ombre:rgba(31,74,61,.5);
  background:linear-gradient(155deg, var(--t-haut), var(--t-bas)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.05), 0 10px 18px -10px var(--t-ombre);
  --ic-corps:var(--t-corps); --ic-trait:var(--t-trait) }
.tuile .ico{ width:32px; height:32px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)) }
li:nth-child(4n+1) > .tuile{ --t-haut:#FBE6D9; --t-bas:#F1C4A9; --t-corps:#E8865A; --t-trait:#7A2F12; --t-ombre:rgba(180,83,42,.5) }
li:nth-child(4n+2) > .tuile{ --t-haut:#FAEDD0; --t-bas:#ECD49A; --t-corps:#D9A441; --t-trait:#5C4210; --t-ombre:rgba(116,86,31,.5) }
li:nth-child(4n+4) > .tuile{ --t-haut:#DFEAEF; --t-bas:#BAD1DB; --t-corps:#4A8AA3; --t-trait:#173C4C; --t-ombre:rgba(42,111,140,.5) }
section.sombre .tuile{ background:rgba(255,255,255,.12); box-shadow:none }
section.hero{ border-top:none }
section[id]{ scroll-margin-top:calc(var(--entete) + 8px) }
.ancre{ display:block; position:relative; top:calc(-1 * var(--entete) - 8px); visibility:hidden }

/* ---------- Boutons et liens ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 26px;
  background:var(--vert); color:#fff;
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:-0.01em; line-height:1.25; text-align:center;
  text-decoration:none; border:none; border-radius:var(--rayon); cursor:pointer;
  transition:background .18s ease;
}
.btn:hover{ background:var(--vert-fonce) }
.btn .ico{ width:20px; height:20px }
.btn.sable{ background:var(--fond); color:var(--vert); --ic-trait:var(--vert); --ic-corps:var(--touche-clair) }
.btn.sable:hover{ background:#fff }
.cta-section{ margin-top:clamp(32px, 4vw, 48px) }

.lien{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:16px; color:var(--vert); text-decoration:none;
  border-bottom:1.5px solid transparent; transition:border-color .18s ease;
}
.lien:hover{ border-bottom-color:currentColor }
.lien .ico{ width:22px; height:22px }
/* Lien vers un autre site : petite fleche en diagonale */
.lien.externe::after{
  content:''; width:9px; height:9px; flex:none; background:currentColor; translate:0 -1px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.2 2H8v4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.2 2H8v4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.suite{ margin-top:22px }
.suite .lien{ min-height:44px }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--vert); outline-offset:3px; border-radius:2px;
}

/* ---------- En-tete ---------- */
.entete{
  position:sticky; top:0; z-index:50;
  background:var(--vert); color:#fff;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.entete.defile, .entete.ouvert{ border-bottom-color:rgba(255,255,255,.16) }
.entete :focus-visible{ outline-color:#fff }
.entete-barre{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--entete) }
.marque{ display:flex; align-items:center; gap:14px; text-decoration:none; min-height:44px; min-width:0 }
.marque-photo{ width:54px; height:54px; object-fit:cover; border-radius:5px; flex:none }
.marque-texte{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.marque b{ font-size:17px; font-weight:800; letter-spacing:-0.015em; white-space:nowrap }
.marque small{ font-size:12px; font-weight:600; color:rgba(255,255,255,.72); letter-spacing:.01em; white-space:nowrap }
.nav{ display:none; align-items:center; gap:28px; font-size:15.5px; font-weight:600 }
.nav a{ text-decoration:none; color:rgba(255,255,255,.84); padding-block:8px }
.nav a:hover{ color:#fff }
.nav .btn-menu{ display:none }
.btn-entete{ min-height:44px; padding:10px 18px; font-size:15px; white-space:nowrap }
.menu-bouton{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  background:none; border:1.5px solid rgba(255,255,255,.35); border-radius:var(--rayon); cursor:pointer; padding:0;
}
.menu-bouton span, .menu-bouton span::before, .menu-bouton span::after{
  display:block; width:18px; height:2px; background:#fff; border-radius:1px; position:relative; transition:transform .2s ease, opacity .2s ease;
}
.menu-bouton span::before, .menu-bouton span::after{ content:''; position:absolute; left:0 }
.menu-bouton span::before{ top:-6px }
.menu-bouton span::after{ top:6px }
.entete.ouvert .menu-bouton span{ background:transparent }
.entete.ouvert .menu-bouton span::before{ transform:translateY(6px) rotate(45deg) }
.entete.ouvert .menu-bouton span::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:899px){
  .entete.ouvert .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--vert); border-bottom:1px solid rgba(255,255,255,.16);
    padding:8px var(--marge) 22px;
  }
  .entete.ouvert .nav a:not(.btn){ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:17px; color:#fff }
  .entete.ouvert .nav .btn-menu{ display:inline-flex; margin-top:18px }
}
@media (min-width:900px){
  .nav{ display:flex }
  .menu-bouton{ display:none }
}
@media (max-width:699px){
  :root{ --entete:68px }
  .marque-photo{ width:44px; height:44px; border-radius:4px }
  .marque{ gap:10px }
  .marque b{ font-size:15.5px }
  .marque small{ display:none }
  .entete-barre{ gap:12px }
  .btn-entete{ padding:10px 14px; font-size:14.5px }
}
@media (max-width:479px){ .btn-entete{ display:none } }

/* ---------- Accueil ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  display:flex; align-items:center; min-height:clamp(520px, 74vh, 780px);
  padding-block:clamp(56px, 9vw, 120px);
}
.hero-fond{ position:absolute; inset:0; z-index:-1; background:var(--vert-fonce) }
.hero-fond img{ width:100%; height:100%; object-fit:cover; object-position:74% 50% }
.hero-fond::after{ content:''; position:absolute; inset:0; background:linear-gradient(98deg, rgba(18,46,38,.88) 0%, rgba(18,46,38,.72) 38%, rgba(18,46,38,.34) 66%, rgba(18,46,38,.18) 100%) }
.hero .oeil{ color:var(--touche-clair) }
.hero h1{ color:#fff }
.hero h1 span{ color:rgba(255,255,255,.72) }
.hero-bas{ display:grid; gap:28px 56px; margin-top:clamp(28px, 4vw, 44px); align-items:end }
.hero-texte{ max-width:36em; color:rgba(255,255,255,.84); font-size:clamp(17px, 1.9vw, 19px); line-height:1.55 }
.hero-texte strong{ color:#fff }
.hero-accroche{ color:#fff; font-weight:600; margin-bottom:14px }
.hero-action{ display:grid; gap:14px; justify-items:start }
.gages{ font-size:14.5px; font-weight:600; color:rgba(255,255,255,.78); line-height:1.5 }
@media (max-width:899px){
  .hero-fond img{ object-position:70% 50% }
  .hero-fond::after{ background:linear-gradient(180deg, rgba(18,46,38,.86) 0%, rgba(18,46,38,.76) 55%, rgba(18,46,38,.56) 100%) }
}
@media (min-width:900px){
  .hero-bas{ grid-template-columns:1.3fr .9fr }
  .hero-action{ justify-items:start; padding-bottom:4px }
}

/* ---------- Benefices ---------- */
.benefices{ list-style:none; margin:clamp(36px, 5vw, 60px) 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--ligne) }
.benefices li{ padding:24px 0; border-bottom:1px solid var(--ligne) }
.benefices .tuile{ margin-bottom:16px }
.benefices h3{ font-size:19px }
.benefices p{ margin-top:8px; color:var(--encre-2); font-size:16px; max-width:28em }
#benefices .conclusion{ margin-top:clamp(28px, 4vw, 40px) }
@media (min-width:600px){
  .benefices{ grid-template-columns:1fr 1fr; column-gap:40px }
}
@media (min-width:1000px){
  .benefices{ grid-template-columns:repeat(4, 1fr); column-gap:0 }
  .benefices li{ padding:28px 28px 28px 0 }
  .benefices li + li{ padding-left:28px; border-left:1px solid var(--ligne) }
}

/* ---------- Comparaison manuel / automatise ---------- */
.comparaison{
  margin:clamp(36px, 5vw, 60px) 0 0; display:grid; gap:0;
  border:1px solid var(--ligne); border-radius:var(--rayon); overflow:hidden; background:#fff;
}
.comparaison figcaption{
  grid-column:1 / -1; padding:14px 22px; border-bottom:1px solid var(--ligne);
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--laiton);
}
.voie{ padding:22px 22px 24px; min-width:0 }
.voie + .voie{ border-top:1px solid var(--ligne) }
.voie-tete{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-bottom:14px }
.voie h3{ font-size:17px }
.bilan{ font-size:14px; font-weight:800; color:var(--encre-3); white-space:nowrap }
.voie.auto .bilan{ color:var(--vert) }
.voie ol{ list-style:none; margin:0; padding:0; position:relative }
.voie ol::before{ content:''; position:absolute; left:7px; top:12px; bottom:12px; width:1.5px; background:var(--ligne) }
.voie li{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0 9px 26px; font-size:15.5px; line-height:1.35 }
.voie li::before{ content:''; position:absolute; left:3px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--encre-3); border:2px solid #fff }
.voie.auto li::before{ background:var(--vert) }
.voie.auto li.humain::before{ background:var(--touche) }
.etape{ min-width:0 }
.qui{ flex:none; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:4px; border:1.5px solid var(--ligne); color:var(--encre-2) }
.voie.auto .qui.auto{ color:var(--vert); border-color:var(--vert); background:var(--vert-pale) }
.voie.auto li.humain .qui{ color:var(--touche); border-color:var(--touche); background:var(--touche-pale) }
.voie.auto li.humain .etape{ font-weight:600 }
@media (max-width:419px){
  .voie{ padding:18px 16px 20px }
  .voie li{ padding-left:22px; font-size:15px }
  .qui{ font-size:11px; padding:3px 7px; letter-spacing:.03em }
}
@media (min-width:760px){
  .comparaison{ grid-template-columns:1fr 1fr }
  .voie{ padding:26px 28px 30px }
  .voie + .voie{ border-top:none; border-left:1px solid var(--ligne) }
}

/* ---------- Cas d'usage ---------- */
.cas{ list-style:none; margin:clamp(40px, 5vw, 64px) 0 0; padding:0; display:grid; gap:20px }
.cas li{ padding:clamp(20px, 2.5vw, 28px); background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon); min-width:0 }
.num{ display:block; font-size:14px; font-weight:800; color:var(--laiton); letter-spacing:.04em; margin-bottom:10px; font-variant-numeric:tabular-nums }
.cas h3{ font-size:clamp(19px, 2vw, 22px) }
.cas p{ margin-top:10px; color:var(--encre-2) }
.resultat{ font-size:15.5px; color:var(--encre-3) }
.resultat em{ font-style:normal }
@media (min-width:800px){
  .cas{ grid-template-columns:1fr 1fr; gap:24px }
}
/* Schema d'enchainement : des noeuds relies par des fleches animees */
.schema{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--ligne) }
.noeud{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--ligne); background:var(--fond-2); font-size:13.5px; font-weight:600; color:var(--encre-2); white-space:nowrap }
.noeud .ico{ width:16px; height:16px }
.noeud.auto{ background:var(--vert); border-color:var(--vert); color:#fff; --ic-trait:#fff; --ic-corps:var(--touche-clair) }
.schema > i{ flex:1 1 18px; min-width:18px; height:2px; position:relative; margin:0 2px;
  background-image:linear-gradient(90deg, var(--vert) 0 50%, transparent 50% 100%); background-size:8px 2px; background-repeat:repeat-x; opacity:.75 }
.schema > i::after{ content:''; position:absolute; right:-1px; top:-4px; width:6px; height:6px; border-right:2px solid var(--vert); border-bottom:2px solid var(--vert); transform:rotate(-45deg) }
.schema.convergent{ display:grid; grid-template-columns:auto 44px auto; align-items:center; gap:0 }
.schema.convergent .sources{ display:grid; gap:6px; justify-items:start }
.schema.convergent .fourche{ height:100%; min-height:90px; position:relative; margin:0; background:none; opacity:1 }
.schema.convergent .fourche::before{ content:''; position:absolute; left:0; top:17px; bottom:17px; width:14px; border:2px solid var(--vert); border-left:none; border-radius:0 10px 10px 0; opacity:.75 }
.schema.convergent .fourche::after{ content:''; position:absolute; left:14px; right:0; top:50%; height:2px; margin-top:-1px; background-image:linear-gradient(90deg, var(--vert) 0 50%, transparent 50% 100%); background-size:8px 2px; opacity:.75 }
.vu .schema > i:not(.fourche){ animation:defile 1.2s linear infinite }
@keyframes defile{ to{ background-position:16px 0 } }
@media (max-width:479px){
  .noeud{ font-size:12.5px; padding:5px 10px; min-height:30px }
  /* Sur petit ecran, l'enchainement se lit de haut en bas */
  .schema:not(.convergent){ flex-direction:column; align-items:flex-start; gap:0 }
  .schema:not(.convergent) > i{ flex:none; width:2px; height:18px; margin:2px 0 2px 18px; background-image:linear-gradient(180deg, var(--vert) 0 50%, transparent 50% 100%); background-size:2px 8px; background-repeat:repeat-y }
  .schema:not(.convergent) > i::after{ right:auto; left:-3px; top:auto; bottom:-1px; transform:rotate(45deg) }
  .vu .schema:not(.convergent) > i{ animation:descend 1.2s linear infinite }
  .schema.convergent{ grid-template-columns:auto 34px auto }
}
@keyframes descend{ to{ background-position:0 16px } }

/* ---------- Metiers ---------- */
.metiers{ list-style:none; margin:clamp(36px, 5vw, 60px) 0 0; padding:0; display:grid; gap:36px 28px }
.metier img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--rayon); background:var(--attente) }
.metier.actif img{ outline:3px solid var(--vert); outline-offset:3px }
.metier h3{ margin-top:18px; font-size:19px }
.metier p{ margin-top:8px; color:var(--encre-2); font-size:16px }
.metiers-autre{
  margin-top:clamp(40px, 5vw, 64px); padding:clamp(22px, 3vw, 32px); border:1px solid var(--ligne); border-radius:var(--rayon);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px;
}
.metiers-autre > div{ max-width:34em }
.metiers-autre .question{ font-size:19px; letter-spacing:-0.01em }
.metiers-autre p + p{ margin-top:4px; color:var(--encre-2) }
@media (min-width:600px){ .metiers{ grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .metiers{ grid-template-columns:repeat(3, 1fr) } }

/* ---------- Methode ---------- */
/* Frise de la methode : quatre reperes relies par une ligne qui se remplit */
.frise{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); margin-top:clamp(36px, 5vw, 60px); padding-top:4px }
.frise span{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--vert); border:2px solid rgba(255,255,255,.35); color:#fff; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; z-index:1 }
.frise-ligne{ position:absolute; left:22px; right:calc(25% - 22px); top:26px; height:2px; background:rgba(255,255,255,.22) }
.frise-ligne::after{ content:''; position:absolute; inset:0; background:var(--touche-clair); transform-origin:left; transform:scaleX(0); transition:transform 1.8s cubic-bezier(.22,.61,.36,1) .3s }
.frise.vu .frise-ligne::after{ transform:scaleX(1) }
.frise span{ transition:border-color .4s ease, box-shadow .4s ease }
.frise.vu span{ border-color:var(--touche-clair) }
.frise.vu span:nth-child(2){ transition-delay:.3s } .frise.vu span:nth-child(3){ transition-delay:.8s } .frise.vu span:nth-child(4){ transition-delay:1.3s } .frise.vu span:nth-child(5){ transition-delay:1.9s }
.etapes{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:0; counter-reset:etape; border-top:1px solid var(--ligne) }
.etapes li{ padding:24px 0; border-bottom:1px solid var(--ligne) }
.etapes h3{ font-size:20px }
.etapes p{ margin-top:10px; color:var(--encre-2); max-width:28em }
.manifeste{ margin-top:clamp(32px, 4vw, 48px); font-size:clamp(19px, 2.2vw, 24px); line-height:1.35; letter-spacing:-0.012em; max-width:28em }
@media (min-width:700px){
  .etapes{ grid-template-columns:repeat(4, 1fr); column-gap:32px; border-top:none }
  .etapes li{ padding:18px 0 0; border-bottom:none }
  .etapes .num{ display:none }
}
@media (max-width:699px){ .frise{ display:none } }

/* ---------- Prestations ---------- */
.prestations{ display:grid; gap:36px; align-items:start }
.liste-prestations{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.liste-prestations li{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon); color:var(--encre); font-weight:600; font-size:16.5px; line-height:1.35 }
@media (min-width:600px){ .liste-prestations{ grid-template-columns:1fr 1fr } }
.prestations-liste .conclusion{ margin-top:28px; font-size:18px }
@media (min-width:900px){
  .prestations{ grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 96px) }
  .prestations .tete{ max-width:none }
}

/* ---------- A propos ---------- */
.a-propos{ display:grid; gap:32px; align-items:start }
.portrait{ margin:0; border-radius:var(--rayon); overflow:hidden; background:var(--attente); max-width:420px }
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 12% }
.colonne-portrait{ display:grid; gap:28px; max-width:420px }
.parcours-frise{ list-style:none; margin:0; padding:0 0 0 22px; position:relative }
.parcours-frise::before{ content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--ligne) }
.parcours-frise li{ position:relative; padding:0 0 18px; font-size:15px; line-height:1.4 }
.parcours-frise li:last-child{ padding-bottom:0 }
.parcours-frise li::before{ content:''; position:absolute; left:-21px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--vert); border:2px solid #fff; box-shadow:0 0 0 2px var(--vert) }
.parcours-frise li.actuel::before{ background:var(--touche); box-shadow:0 0 0 2px var(--touche) }
.parcours-frise b{ display:block; color:var(--encre); font-weight:800 }
.parcours-frise span{ color:var(--encre-3); font-size:14px }
.a-propos .texte > p{ color:var(--encre-2); margin-top:16px; max-width:36em }
.a-propos .texte > p.oeil{ margin-top:0; color:var(--laiton) }
.a-propos .engagement{ color:var(--encre) }
@media (max-width:599px){ .colonne-portrait{ max-width:none } .portrait img{ aspect-ratio:1/1 } }
@media (min-width:900px){
  .a-propos{ grid-template-columns:.8fr 1.2fr; gap:clamp(40px, 6vw, 88px) }
}

/* ---------- Contact ---------- */
.contact-grille{ display:grid; gap:40px; align-items:start }
.contact-texte > p{ margin-top:16px; color:var(--encre-2); max-width:34em }
.contact-texte > p.oeil{ margin-top:0; color:var(--laiton) }
.contact-texte .parlons{ font-size:clamp(20px, 2.4vw, 26px); font-weight:800; color:var(--encre); letter-spacing:-0.015em; margin-top:10px }
.contact-texte .engagement{ color:var(--encre) }
.contact-texte .cta-section{ margin-top:28px }
.direct{ display:flex; align-items:flex-start; gap:16px; margin-top:clamp(32px, 4vw, 44px); padding-top:28px; border-top:1px solid var(--ligne) }
.avatar{ width:56px; height:56px; border-radius:5px; object-fit:cover; flex:none }
.direct-titre{ font-weight:800; color:var(--encre); margin-bottom:8px }
.direct-ligne{ display:flex; align-items:center; gap:10px; min-height:40px; color:var(--encre-2); line-height:1.4 }
.direct-ligne a{ color:var(--encre); font-weight:600; text-decoration-color:var(--ligne); text-underline-offset:3px; display:inline-block; padding-block:9px }
.direct-ligne a:hover{ text-decoration-color:currentColor }
.direct-ligne .ico{ width:20px; height:20px }
@media (min-width:900px){
  .contact-grille{ grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 6vw, 80px) }
}

section.sombre .contact-texte > p, section.sombre .direct-ligne{ color:rgba(255,255,255,.84) }
section.sombre .contact-texte .parlons, section.sombre .direct-titre, section.sombre .direct-ligne a{ color:#fff }
section.sombre .direct{ border-top-color:rgba(255,255,255,.18) }
section.sombre .btn:not(.sable){ background:var(--fond); color:var(--vert) }
section.sombre .btn:not(.sable):hover{ background:#fff }
.formulaire{ background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon); padding:clamp(22px, 3vw, 32px); color:var(--encre); --ligne:#DACFBE; --ic-trait:var(--vert); --ic-corps:var(--touche-pale) }
section.sombre .formulaire h3, section.sombre .formulaire strong{ color:var(--encre) }
section.sombre .formulaire p, section.sombre .formulaire label, section.sombre .formulaire .option{ color:var(--encre-2) }
section.sombre .formulaire .champ label, section.sombre .formulaire legend{ color:var(--encre) }
section.sombre .formulaire .mention{ color:var(--encre-3) }
section.sombre .formulaire .btn{ background:var(--vert); color:#fff }
section.sombre .formulaire .btn:hover{ background:var(--vert-fonce) }
.formulaire h3{ display:flex; align-items:center; gap:10px; font-size:clamp(20px, 2.2vw, 24px) }
.formulaire h3 .ico{ width:26px; height:26px }
form{ margin-top:22px; display:grid; gap:16px }
.champs{ display:grid; gap:16px }
.champ label{ display:block; font-size:14px; font-weight:800; margin-bottom:6px }
.champ label small{ font-weight:600; color:var(--encre-3) }
input[type=text], input[type=tel], input[type=email], textarea{
  width:100%; min-height:48px; padding:12px 14px;
  font-family:inherit; font-size:16px; color:var(--encre);
  background:var(--champ); border:1.5px solid var(--ligne); border-radius:var(--rayon);
  transition:border-color .15s ease;
}
textarea{ min-height:104px; resize:vertical; line-height:1.5 }
input:hover, textarea:hover{ border-color:#C9BEAA }
input:focus, textarea:focus{ border-color:var(--vert); outline:none }
/* Champs avec icone a gauche */
.saisie{ position:relative; display:block }
.saisie > .ico{ position:absolute; left:13px; top:14px; width:20px; height:20px; pointer-events:none }
.saisie > input, .saisie > textarea{ padding-left:44px }
.besoins{ border:none; margin:0; padding:0; min-width:0 }
.besoins legend{ font-size:14px; font-weight:800; padding:0; margin-bottom:8px }
.options{ display:grid; gap:4px }
.option{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:center; min-height:38px; font-size:15.5px; color:var(--encre-2); cursor:pointer }
.option input{ width:20px; height:20px; margin:0; accent-color:var(--vert) }
.option input:checked + span{ color:var(--encre); font-weight:600 }
form .btn{ width:100% }
.mention{ display:grid; grid-template-columns:16px 1fr; gap:8px; align-items:start; font-size:13px; color:var(--encre-3); line-height:1.5 }
.mention > .ico{ width:16px; height:16px; margin-top:2px }
.mention a{ color:var(--encre-2); display:inline-block; padding-block:6px }
.visuellement-cache{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.retour{ display:none; padding:16px; border-radius:var(--rayon); background:var(--vert-pale); color:var(--vert-fonce); font-weight:600; font-size:15.5px }
.retour.visible{ display:block }
.retour.erreur{ background:#F6E3DF; color:#7A2A1C }
.retour:focus{ outline:none }
@media (min-width:700px){ .champs.deux{ grid-template-columns:1fr 1fr } }
@media (max-width:699px){ .formulaire{ padding:20px 16px } }

/* ---------- Pied ---------- */
.pied{ background:#102E25; font-size:15px; color:rgba(255,255,255,.72) }
.pied-grille{ display:grid; gap:28px; padding-block:clamp(40px, 5vw, 64px) 32px }
.pied-nom{ font-weight:800; color:#fff; font-size:17px; margin-bottom:4px }
.pied-devise{ margin-top:14px; color:rgba(255,255,255,.88); max-width:30em }
.pied-liens{ display:flex; flex-wrap:wrap; gap:4px 24px; align-content:start }
.pied a{ text-decoration:none; color:rgba(255,255,255,.84); display:inline-block; padding-block:10px }
.pied a:hover{ color:#fff }
.pied :focus-visible{ outline-color:#fff }
.pied-liens a{ font-weight:600 }
.pied-bas{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 28px; padding-block:18px 28px; border-top:1px solid rgba(255,255,255,.16); font-size:14px; line-height:1.6 }
.pied-bas nav{ display:flex; flex-wrap:wrap; gap:4px 20px }
@media (min-width:700px){
  .pied-grille{ grid-template-columns:1.2fr .8fr }
  .pied-liens{ justify-content:flex-end }
}

/* ---------- Pages simples (legal, merci) ---------- */
.page{ padding-block:clamp(40px, 6vw, 80px); border-top:none }
.page .wrap{ max-width:none }
.page h1, .page h2, .page p, .page ul{ max-width:46em }
.page h1{ font-size:clamp(32px, 5vw, 46px) }
.page h2{ font-size:clamp(20px, 2.4vw, 24px); margin-top:40px; letter-spacing:-0.015em }
.page p, .page li{ color:var(--encre-2); margin-top:12px }
.page ul{ padding-left:20px }
.page .maj{ margin-top:14px; font-size:14.5px; color:var(--encre-3) }
.page .intro{ margin-top:18px }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.btn.fantome{ background:transparent; color:var(--encre); box-shadow:inset 0 0 0 1.5px var(--ligne); --ic-trait:var(--vert); --ic-corps:var(--touche-clair) }
.btn.fantome:hover{ background:var(--carte); box-shadow:inset 0 0 0 1.5px var(--encre-3) }
@media (max-width:699px){ .actions .btn{ width:100% } }

/* ---------- Bouton WhatsApp flottant ----------
   visible une fois le haut de page passe, masque quand le bloc contact est a l'ecran */
.wa-flottant{
  position:fixed; z-index:60;
  right:max(16px, env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:12px 18px;
  background:var(--vert); color:#fff; border-radius:var(--rayon); text-decoration:none;
  font-weight:800; font-size:15px; letter-spacing:-0.01em;
  box-shadow:0 12px 28px rgba(21,24,27,.22);
  transition:opacity .25s ease, background .18s ease;
}
.wa-flottant:hover{ background:var(--vert-fonce) }
.wa-flottant .ico{ width:20px; height:20px }
.js .wa-flottant{ opacity:0; pointer-events:none }
.js .wa-flottant.visible{ opacity:1; pointer-events:auto }

/* ---------- Mobile ---------- */
@media (max-width:699px){
  section{ padding-block:52px }
  .oeil{ margin-bottom:14px }
  h1{ font-size:clamp(34px, 9.4vw, 44px) }
  h2{ font-size:clamp(27px, 7.4vw, 34px) }
  .hero{ min-height:0; padding-block:48px 56px }
  .hero-action .btn{ width:100% }
  .cta-section .btn{ width:100% }
  .metiers-autre .btn{ width:100% }
  .wa-flottant span{ display:none }
  .wa-flottant{ padding:12px 14px }
}

/* ---------- Animations sobres ----------
   Apparition au defilement, listes en cascade, module de comparaison qui se deroule.
   Tout est visible d'emblee sans JavaScript ou en mouvement reduit. */
@keyframes pose{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.js .anim{ opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) }
.js .anim.vu{ opacity:1; transform:none }
.js .cascade > li{ opacity:0; transform:translateY(14px) }
.cascade.vu > li{ animation:pose .65s cubic-bezier(.22,.61,.36,1) both }
.cascade.vu > li:nth-child(2){ animation-delay:.09s }
.cascade.vu > li:nth-child(3){ animation-delay:.18s }
.cascade.vu > li:nth-child(4){ animation-delay:.27s }
.cascade.vu > li:nth-child(5){ animation-delay:.36s }
.cascade.vu > li:nth-child(6){ animation-delay:.45s }
/* Haut de page : le texte se pose a l'ouverture */
.js .hero > .wrap > *{ animation:pose .75s cubic-bezier(.22,.61,.36,1) both }
.js .hero > .wrap > :nth-child(2){ animation-delay:.08s }
.js .hero > .wrap > :nth-child(3){ animation-delay:.18s }
/* Module de comparaison : la colonne automatisee se deroule etape par etape */
.js .voie.auto li{ transition:opacity .4s ease }
.js .voie.auto li::before{ transition:background .35s ease, transform .35s ease }
.js .voie.auto .qui{ transition:opacity .35s ease, transform .35s ease }
.js .comparaison.vu .voie.auto li:not(.fait){ opacity:.42 }
.js .comparaison.vu .voie.auto li:not(.fait)::before{ background:var(--ligne); transform:scale(.8) }
.js .comparaison.vu .voie.auto li:not(.fait) .qui{ opacity:0; transform:translateX(6px) }
.js .comparaison.vu .voie.auto li.fait::before{ transform:scale(1.25) }
/* Cartes metiers : la photo se rapproche au survol */
.metier img{ transition:transform .6s cubic-bezier(.22,.61,.36,1) }
.metier:hover img{ transform:scale(1.03) }
.btn{ transition:background .18s ease, transform .15s ease, box-shadow .2s ease }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(31,74,61,.22) }
.btn:active{ transform:translateY(0); box-shadow:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .anim, .js .cascade > li, .js .hero > .wrap > *{ opacity:1; transform:none; animation:none; transition:none }
  .js .comparaison.vu .voie.auto li:not(.fait){ opacity:1 }
  .js .comparaison.vu .voie.auto li:not(.fait)::before{ background:var(--vert); transform:none }
  .js .comparaison.vu .voie.auto li.humain:not(.fait)::before{ background:var(--touche) }
  .js .comparaison.vu .voie.auto li:not(.fait) .qui{ opacity:1; transform:none }
  .metier img, .btn{ transition:none; transform:none }
  .btn:hover{ transform:none; box-shadow:none }
  .btn, .lien, .entete, .wa-flottant, .menu-bouton span, .menu-bouton span::before, .menu-bouton span::after, input, textarea{ transition:none }
}