/* ==========================================================================
   OTS SOLUTIONS — Feuille de style principale
   Palette issue du logo : dégradé rouge braise → orange signal,
   motif « bande » repris du bandeau blanc du logo.
   ========================================================================== */

:root{
  /* Couleurs de marque (échantillonnées dans le logo) */
  --rouge:   #D93714;
  --orange:  #F5820B;
  --ambre:   #D97009;
  --accent:  #BC4708;           /* liens & touches sur fond clair (contraste AA) */

  /* Neutres chauds */
  --braise:  #241109;           /* sections sombres */
  --encre:   #33200F;           /* texte principal */
  --taupe:   #7A5C43;           /* texte secondaire */
  --papier:  #FFFDFA;           /* fond principal */
  --sable:   #FBF1E6;           /* fond alterné léger */
  --ligne:   #ECD9C6;           /* filets sur fond clair */

  --grad:        linear-gradient(97deg, var(--rouge) 0%, var(--orange) 82%);
  --grad-doux:   linear-gradient(97deg, #FFE3CF 0%, #FFF2DE 100%);

  --ok:      #1B7A43;
  --erreur:  #B3261E;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  --r-pill: 999px;

  --ombre-portee: 0 22px 44px -20px rgba(122, 46, 9, .38);
  --ombre-douce:  0 10px 26px -14px rgba(122, 46, 9, .28);

  --entete-h: 76px;
  --notch: var(--papier);       /* couleur de l'encoche du motif bande */
}

/* ---------- Réinitialisation & base ---------- */
*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--entete-h) + 18px);
}

body{
  margin:0;
  font-family:"Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:1.04rem;
  line-height:1.66;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}

img, svg{ display:block; max-width:100%; }

h1,h2,h3,h4{
  line-height:1.08;
  margin:0 0 .5em;
  font-weight:760;
  font-stretch:118%;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem, 5.4vw, 3.7rem); font-weight:800; font-stretch:122%; }
h2{ font-size:clamp(1.75rem, 3.4vw, 2.5rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

a{ color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--rouge); }

:focus-visible{
  outline:3px solid var(--rouge);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:#FFD9BC; color:var(--braise); }

.conteneur{
  width:min(1140px, 100% - 2.6rem);
  margin-inline:auto;
}

.section{ padding-block: clamp(3.6rem, 8vw, 6.2rem); }
.section-serree{ padding-block: clamp(2.4rem, 5vw, 3.4rem); }

/* Sections sombres */
.sombre{
  background:var(--braise);
  color:#F9EADC;
  --notch: var(--braise);
}
.sombre h1,.sombre h2,.sombre h3{ color:#FFF6ED; }
.sombre p{ color:#EBD4C0; }
.sombre a{ color:#FFB877; }
.sombre a:hover{ color:#FFD1A3; }
.sombre .kicker{ color:#FFB877; }

.fond-sable{ background:var(--sable); --notch: var(--sable); }

/* ---------- Motif « bande » (écho du bandeau du logo) ---------- */
.bande{
  display:block;
  width:58px; height:8px;
  border-radius:4px;
  background:var(--grad);
  position:relative;
  margin-bottom:14px;
}
.bande::after{            /* encoche claire, comme le bandeau blanc du logo */
  content:"";
  position:absolute; top:0; bottom:0;
  left:38%; width:16%;
  background:var(--notch);
}
.bande-centre{ margin-inline:auto; }

.kicker{
  font-weight:640;
  font-stretch:112%;
  color:var(--accent);
  margin:0 0 .35em;
  font-size:1.02rem;
}

.entete-section{ max-width:640px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.entete-section p{ color:var(--taupe); }
.sombre .entete-section p{ color:#DBBEA6; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.82em 1.45em;
  border-radius:var(--r-md);
  font-weight:660; font-stretch:108%;
  font-size:1rem;
  text-decoration:none;
  border:1.6px solid transparent;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn:active{ transform:translateY(1px); }

.btn-plein{
  background:var(--grad);
  color:#fff;
  box-shadow:var(--ombre-douce);
}
.btn-plein:hover{ box-shadow:var(--ombre-portee); transform:translateY(-2px); color:#fff; }

.btn-ligne{
  border-color:var(--encre);
  color:var(--encre);
  background:transparent;
}
.btn-ligne:hover{ background:var(--encre); color:#FFF6ED; }

.sombre .btn-ligne,
.btn-ligne-claire{
  border-color:#F3D9C2; color:#FFF3E6;
}
.sombre .btn-ligne:hover,
.btn-ligne-claire:hover{ background:#FFF3E6; color:var(--braise); }

.btn-wa{
  background:#1FAF54;
  color:#fff;
}
.btn-wa:hover{ background:#179445; color:#fff; transform:translateY(-2px); box-shadow:var(--ombre-douce); }

/* ---------- En-tête ---------- */
.entete{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,250,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.entete.compact{
  border-bottom-color:var(--ligne);
  box-shadow:0 8px 24px -18px rgba(122,46,9,.35);
}
.entete-int{
  height:var(--entete-h);
  display:flex; align-items:center; gap:1.4rem;
}
.logo-lien{ display:inline-flex; align-items:center; }
.logo-lien img{ height:44px; width:auto; }

.nav-principal{ margin-left:auto; }
.nav-principal ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.55rem; align-items:center;
}
.nav-principal a{
  text-decoration:none;
  color:var(--encre);
  font-weight:560;
  padding:.35em 0;
  position:relative;
}
.nav-principal a::after{
  content:""; position:absolute; left:0; right:100%;
  bottom:-2px; height:3px; border-radius:2px;
  background:var(--grad);
  transition:right .22s ease;
}
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after{ right:0; }
.nav-principal a[aria-current="page"]{ color:var(--accent); }

.entete .btn{ padding:.62em 1.1em; font-size:.95rem; }

.menu-btn{
  display:none;
  margin-left:auto;
  background:none; border:1.6px solid var(--encre);
  border-radius:var(--r-sm);
  width:46px; height:44px;
  align-items:center; justify-content:center;
  color:var(--encre);
  cursor:pointer;
}
.menu-btn svg{ width:24px; height:24px; }
.menu-btn .icone-fermer{ display:none; }
.menu-btn[aria-expanded="true"] .icone-menu{ display:none; }
.menu-btn[aria-expanded="true"] .icone-fermer{ display:block; }

/* ---------- Héros ---------- */
.heros{
  position:relative;
  overflow:hidden;
  padding-block: clamp(3.2rem, 7vw, 5.6rem) clamp(3.6rem, 8vw, 6rem);
}
.heros::before{      /* lueur braise en haut à droite */
  content:"";
  position:absolute; inset:-40% -25% auto auto;
  width:70%; aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(245,130,11,.16), transparent 70%);
  pointer-events:none;
}
.heros-int{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  position:relative;
}
.heros h1{ margin-bottom:.4em; }

.slogan{
  display:inline-block;
  background:var(--grad);
  color:#fff;
  font-weight:680; font-stretch:112%;
  padding:.42em .85em;
  border-radius:var(--r-sm);
  margin:0 0 1.05em;
  box-shadow:var(--ombre-douce);
}

.heros-texte > p{ color:var(--taupe); font-size:1.09rem; }

.heros-actions{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:1.6rem;
}

.heros-preuves{
  margin:1.9rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.55rem .6rem;
}
.heros-preuves li{
  display:inline-flex; align-items:center; gap:.45em;
  border:1.4px solid var(--ligne);
  background:#fff;
  border-radius:var(--r-pill);
  padding:.42em .95em;
  font-size:.93rem; font-weight:560;
  color:var(--encre);
}
.heros-preuves svg{ width:15px; height:15px; color:var(--ambre); }

/* Visuel héros (SVG réseau + pastilles) */
.heros-visuel{ position:relative; }
.heros-visuel svg.mesh{
  width:100%; height:auto;
  filter:drop-shadow(0 30px 44px rgba(122,46,9,.22));
}
.pastille{
  position:absolute;
  display:inline-flex; align-items:center; gap:.5em;
  background:#fff;
  border:1.4px solid var(--ligne);
  border-radius:var(--r-pill);
  padding:.5em 1em;
  font-weight:640; font-stretch:110%;
  font-size:.95rem;
  box-shadow:var(--ombre-douce);
  white-space:nowrap;
}
.pastille svg{ width:17px; height:17px; color:var(--rouge); }
.pastille-1{ top:6%;  left:-4%; }
.pastille-2{ top:44%; right:-5%; }
.pastille-3{ bottom:5%; left:10%; }

/* Séquence d'entrée du héros — l'unique moment animé de la page */
@media (prefers-reduced-motion: no-preference){
  .heros [data-entree]{
    opacity:0;
    transform:translateY(16px);
    animation:entree .65s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay:calc(var(--i, 0) * 90ms);
  }
  .heros-visuel{ --i:3; }
  @keyframes entree{ to{ opacity:1; transform:none; } }

  .heros-visuel svg.mesh{
    animation:flotte 7s ease-in-out 1.2s infinite alternate;
  }
  @keyframes flotte{ from{ transform:translateY(0); } to{ transform:translateY(-10px); } }
}

/* ---------- Bandeau des trois pôles (écho du papier en-tête) ---------- */
.trio{
  background:var(--braise);
  color:#FFDFC2;
}
.trio ul{
  list-style:none; margin:0; padding:1.05rem 0;
  display:flex; justify-content:center; align-items:center;
  gap:clamp(1.2rem, 5vw, 3.2rem);
  flex-wrap:wrap;
  font-weight:700; font-stretch:120%;
  font-size:clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing:.06em;
}
.trio li{ display:flex; align-items:center; gap:clamp(1.2rem, 5vw, 3.2rem); }
.trio li + li::before{
  content:"";
  width:9px; height:9px; border-radius:50%;
  background:var(--grad);
}

/* ---------- Domaines de services (accueil) ---------- */
.grille-domaines{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.2rem, 3vw, 2rem);
}
.domaine{
  display:grid;
  grid-template-columns:66px 1fr;
  gap:1.15rem;
  padding:1.6rem;
  border:1.5px solid var(--ligne);
  border-radius:var(--r-lg);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.domaine:hover{
  border-color:#F1B279;
  box-shadow:var(--ombre-douce);
  transform:translateY(-3px);
}
.domaine-icone{
  width:66px; height:66px;
  border-radius:var(--r-md);
  background:var(--grad);
  color:#fff;
  display:grid; place-items:center;
}
.domaine-icone svg{ width:32px; height:32px; }
.domaine h3{ margin-bottom:.3em; }
.domaine ul{
  list-style:none; margin:.2rem 0 .9rem; padding:0;
  display:grid; gap:.4rem;
  color:var(--taupe);
}
.domaine li{
  display:flex; gap:.55em; align-items:baseline;
}
.domaine li::before{
  content:"";
  flex:none;
  width:14px; height:5px; border-radius:3px;
  background:var(--grad);
  transform:translateY(-3px);
}
.lien-suite{
  font-weight:640;
}

/* ---------- Étapes (vraie séquence → numérotation justifiée) ---------- */
.etapes{
  counter-reset:etape;
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.2rem, 3vw, 2.2rem);
}
.etapes li{
  counter-increment:etape;
  border-top:1.5px solid rgba(255,214,178,.28);
  padding-top:1.15rem;
}
.etapes li::before{
  content:counter(etape, decimal-leading-zero);
  display:block;
  font-size:2.15rem;
  font-weight:800; font-stretch:124%;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  margin-bottom:.45rem;
}
.etapes h3{ font-size:1.12rem; margin-bottom:.35em; }
.etapes p{ font-size:.97rem; color:#E4C6AC; }

/* ---------- Pourquoi nous ---------- */
.pourquoi{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.pourquoi-titre{ position:sticky; top:calc(var(--entete-h) + 24px); }
.raisons{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.raisons li{
  border-left:4px solid transparent;
  border-image:var(--grad) 1;
  padding:.15rem 0 .15rem 1.15rem;
}
.raisons h3{ font-size:1.14rem; margin-bottom:.25em; }
.raisons p{ color:var(--taupe); font-size:.99rem; }

/* ---------- Réalisations / tuiles projet ---------- */
.filtres{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom:2rem;
}
.filtre{
  border:1.5px solid var(--ligne);
  background:#fff;
  color:var(--encre);
  border-radius:var(--r-pill);
  padding:.5em 1.15em;
  font:inherit; font-weight:580;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtre:hover{ border-color:#E9A55F; }
.filtre[aria-pressed="true"]{
  background:var(--grad);
  border-color:transparent;
  color:#fff;
}

.grille-projets{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.2rem, 3vw, 1.8rem);
}
.projet{
  border:1.5px solid var(--ligne);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.projet:hover{ box-shadow:var(--ombre-douce); transform:translateY(-3px); border-color:#F1B279; }
.projet[hidden]{ display:none; }

.projet-visuel{
  aspect-ratio:16/10;
  position:relative;
  display:flex; align-items:flex-start;
  padding:1.05rem;
  color:#fff;
}
.projet-visuel svg.filigrane{
  position:absolute; right:-14px; bottom:-16px;
  width:46%; height:auto;
  opacity:.3;
}
/* Variantes de fond des tuiles (pas de photos fournies : dégradés de marque) */
.v-1{ background:linear-gradient(135deg,#D93714 0%, #F5820B 100%); }
.v-2{ background:linear-gradient(160deg,#B32A0E 0%, #E85E10 100%); }
.v-3{ background:linear-gradient(125deg,#F5820B 0%, #FFB13D 100%); color:#4A2000; }
.v-4{ background:linear-gradient(150deg,#3A1A0C 0%, #7A2E09 100%); }
.v-5{ background:linear-gradient(140deg,#E2470F 0%, #D97009 100%); }

.chip{
  display:inline-block;
  background:rgba(255,253,250,.92);
  color:var(--braise);
  border-radius:var(--r-pill);
  font-size:.82rem; font-weight:660;
  padding:.32em .85em;
}
.projet-corps{ padding:1.15rem 1.25rem 1.35rem; }
.projet-corps h3{ font-size:1.12rem; margin-bottom:.3em; }
.projet-corps p{ color:var(--taupe); font-size:.96rem; }
.projet-lieu{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:.75rem;
  font-size:.88rem; color:var(--taupe);
}
.projet-lieu svg{ width:15px; height:15px; color:var(--ambre); }

.note-portfolio{
  margin-top:2.2rem;
  border:1.5px dashed #E4B98B;
  border-radius:var(--r-md);
  background:var(--sable);
  padding:1rem 1.25rem;
  color:#7A5230;
  font-size:.95rem;
}

/* ---------- Bande d'appel à l'action ---------- */
.cta{
  background:var(--grad);
  color:#fff;
  text-align:center;
  border-radius:var(--r-lg);
  padding:clamp(2.4rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem);
  box-shadow:var(--ombre-portee);
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute; inset:auto -12% -55% auto;
  width:55%; aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(255,255,255,.28), transparent 70%);
}
.cta h2{ color:#fff; }
.cta p{ color:#FFE7D2; margin-inline:auto; }
.cta .heros-actions{ justify-content:center; }
.cta .btn-ligne{ border-color:#fff; color:#fff; }
.cta .btn-ligne:hover{ background:#fff; color:var(--rouge); }
.cta .btn-plein{ background:#fff; color:var(--rouge); }
.cta .btn-plein:hover{ color:var(--braise); }

/* ---------- Pages de contenu (services, à propos…) ---------- */
.heros-page{
  padding-block:clamp(2.8rem, 6vw, 4.4rem);
  border-bottom:1px solid var(--ligne);
}
.heros-page p{ color:var(--taupe); font-size:1.08rem; }

.bloc-service{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem, 4vw, 3.4rem);
  padding-block:clamp(2.6rem, 5vw, 3.8rem);
}
.bloc-service + .bloc-service{ border-top:1.5px solid var(--ligne); }
.bloc-service .domaine-icone{ margin-bottom:1rem; }
.bloc-service .intro{ color:var(--taupe); }

.liste-prestations{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.85rem;
}
.liste-prestations li{
  display:flex; gap:.8em; align-items:flex-start;
  background:#fff;
  border:1.5px solid var(--ligne);
  border-radius:var(--r-md);
  padding:.95rem 1.1rem;
}
.liste-prestations svg{
  flex:none; width:21px; height:21px;
  color:var(--ambre);
  margin-top:.15em;
}
.liste-prestations strong{ display:block; font-stretch:108%; }
.liste-prestations span{ color:var(--taupe); font-size:.95rem; }

/* À propos */
.deux-colonnes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.8rem, 4vw, 3.4rem);
  align-items:start;
}
.encart{
  background:#fff;
  border:1.5px solid var(--ligne);
  border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;
}
.encart-sombre{
  background:var(--braise);
  color:#F4DFCB;
  border:none;
}
.encart-sombre h3{ color:#FFF3E4; }
.encart dl{ margin:0; display:grid; gap:.85rem; }
.encart dt{ font-weight:660; font-stretch:108%; }
.encart dd{ margin:0; color:var(--taupe); }
.encart-sombre dd{ color:#E2C3A7; }

.valeurs{ list-style:none; margin:0; padding:0; display:grid; gap:1.05rem; }
.valeurs li{ display:flex; gap:.8em; }
.valeurs svg{ flex:none; width:22px; height:22px; color:var(--ambre); margin-top:.2em; }
.valeurs strong{ display:block; }
.valeurs span{ color:var(--taupe); font-size:.97rem; }

/* ---------- Contact ---------- */
.grille-contact{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem, 4vw, 3.4rem);
  align-items:start;
}

.formulaire{
  background:#fff;
  border:1.5px solid var(--ligne);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem, 3vw, 2.1rem);
  box-shadow:var(--ombre-douce);
}
.champ{ margin-bottom:1.15rem; }
.champ label{
  display:block;
  font-weight:620; font-stretch:106%;
  margin-bottom:.4rem;
}
.champ .aide{ font-weight:440; color:var(--taupe); font-size:.88rem; }
.champ input,
.champ select,
.champ textarea{
  width:100%;
  font:inherit;
  color:var(--encre);
  background:var(--papier);
  border:1.6px solid var(--ligne);
  border-radius:var(--r-sm);
  padding:.78em .95em;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.champ textarea{ resize:vertical; min-height:150px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,130,11,.22);
}
.deux-champs{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.champ-cache{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.statut{ margin-top:1rem; font-weight:560; }
.statut.ok{ color:var(--ok); }
.statut.erreur{ color:var(--erreur); }

.coordonnees{ display:grid; gap:1rem; }
.carte-coord{
  display:flex; gap:1rem; align-items:flex-start;
  background:#fff;
  border:1.5px solid var(--ligne);
  border-radius:var(--r-md);
  padding:1.1rem 1.2rem;
}
.carte-coord .puce{
  flex:none;
  width:46px; height:46px;
  border-radius:var(--r-sm);
  background:var(--grad);
  color:#fff;
  display:grid; place-items:center;
}
.carte-coord .puce svg{ width:22px; height:22px; }
.carte-coord h3{ font-size:1.04rem; margin-bottom:.15em; }
.carte-coord p, .carte-coord a{ font-size:.98rem; }
.carte-coord p{ color:var(--taupe); }

.carte-carte{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1.5px solid var(--ligne);
  margin-top:1rem;
}
.carte-carte iframe{
  display:block;
  width:100%; height:280px; border:0;
}

/* FAQ */
.faq{ display:grid; gap:.85rem; max-width:760px; }
.faq details{
  border:1.5px solid var(--ligne);
  border-radius:var(--r-md);
  background:#fff;
  padding:1rem 1.2rem;
}
.faq details[open]{ border-color:#F1B279; box-shadow:var(--ombre-douce); }
.faq summary{
  cursor:pointer;
  font-weight:640; font-stretch:108%;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-size:1.4rem; font-weight:500;
  color:var(--ambre);
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:.7rem; color:var(--taupe); }

/* ---------- Pied de page ---------- */
.pied{
  background:var(--braise);
  color:#EBD2BB;
  padding-top:clamp(2.8rem, 6vw, 4rem);
}
.pied-int{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr;
  gap:clamp(1.8rem, 4vw, 3rem);
  padding-bottom:2.4rem;
}
.pied img{ height:52px; width:auto; margin-bottom:1rem; }
.pied p{ color:#D9B999; font-size:.97rem; }
.pied h3{
  color:#FFF3E4; font-size:1.02rem;
  margin-bottom:.9rem;
}
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pied a{ color:#F0CFAE; text-decoration:none; }
.pied a:hover{ color:#FFB877; text-decoration:underline; }
.pied .coord-ligne{
  display:flex; gap:.6em; align-items:flex-start;
  color:#E2C3A7; font-size:.97rem;
}
.pied .coord-ligne svg{ flex:none; width:18px; height:18px; color:var(--orange); margin-top:.22em; }

.pied-bas{
  border-top:1px solid rgba(255,214,178,.18);
  padding:1.15rem 0 1.3rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  justify-content:space-between;
  font-size:.88rem; color:#C9A582;
}
.pied-bas a{ color:#C9A582; }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-flottant{
  position:fixed;
  right:18px; bottom:18px;
  z-index:70;
  width:58px; height:58px;
  border-radius:50%;
  background:#1FAF54;
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 30px -10px rgba(23,116,58,.55);
  transition:transform .16s ease, box-shadow .16s ease;
}
.wa-flottant:hover{ transform:translateY(-3px) scale(1.04); color:#fff; }
.wa-flottant svg{ width:30px; height:30px; }

/* ---------- Page 404 ---------- */
.page-404{
  min-height:60vh;
  display:grid; place-items:center;
  text-align:center;
  padding-block:4rem;
}
.page-404 .code{
  font-size:clamp(4.5rem, 14vw, 8rem);
  font-weight:800; font-stretch:125%;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- Utilitaires ---------- */
.centre{ text-align:center; }
.centre .entete-section{ margin-inline:auto; }
.mt-2{ margin-top:2rem; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Adaptation mobile / tablette
   ========================================================================== */
@media (max-width: 980px){
  .heros-int{ grid-template-columns:1fr; }
  .heros-visuel{ max-width:520px; margin-inline:auto; width:100%; }
  .grille-projets{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .etapes{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:2rem; }
  .pourquoi{ grid-template-columns:1fr; }
  .pourquoi-titre{ position:static; }
  .bloc-service{ grid-template-columns:1fr; }
  .grille-contact{ grid-template-columns:1fr; }
  .pied-int{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px){
  .nav-principal{
    position:fixed;
    inset:var(--entete-h) 0 auto 0;
    background:var(--papier);
    border-bottom:1.5px solid var(--ligne);
    box-shadow:0 24px 40px -22px rgba(122,46,9,.35);
    padding:1.2rem 1.4rem 1.6rem;
    display:none;
  }
  .nav-principal.ouvert{ display:block; }
  .nav-principal ul{
    flex-direction:column;
    align-items:stretch;
    gap:.2rem;
  }
  .nav-principal a{
    display:block;
    padding:.8em .4em;
    border-bottom:1px solid var(--ligne);
    font-size:1.08rem;
  }
  .nav-principal a::after{ display:none; }
  .nav-principal li:last-child a{ border-bottom:none; }
  .entete .btn-entete{ display:none; }
  .menu-btn{ display:inline-flex; }
}

@media (max-width: 640px){
  .grille-domaines{ grid-template-columns:1fr; }
  .grille-projets{ grid-template-columns:1fr; }
  .etapes{ grid-template-columns:1fr; }
  .deux-champs{ grid-template-columns:1fr; }
  .deux-colonnes{ grid-template-columns:1fr; }
  .pied-int{ grid-template-columns:1fr; }
  .domaine{ grid-template-columns:54px 1fr; padding:1.25rem; }
  .domaine-icone{ width:54px; height:54px; }
  .domaine-icone svg{ width:26px; height:26px; }
  .pastille-1{ left:0; }
  .pastille-2{ right:0; }
  .logo-lien img{ height:38px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   Carrousel d'accueil
   ========================================================================== */
.carrousel{
  position:relative;
  overflow:hidden;
  background:var(--braise);
}
.carrousel-piste{
  display:flex;
  transition:transform .65s cubic-bezier(.25,.8,.35,1);
  touch-action:pan-y;
}
.diapo{
  flex:0 0 100%;
  position:relative;
  min-height:clamp(380px, 56vh, 580px);
  display:flex;
}
.diapo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
}
.diapo::after{            /* voile pour la lisibilité du texte */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(27,10,3,.78) 0%, rgba(27,10,3,.42) 48%, rgba(27,10,3,.05) 80%);
}
.diapo-legende{
  position:relative; z-index:1;
  width:100%;
  display:flex; align-items:center;
  padding-block:3.6rem 4.4rem;
}
.diapo-legende .kicker{ color:#FFC48E; }
.diapo-titre{
  font-size:clamp(1.9rem, 4.5vw, 3.15rem);
  font-weight:790; font-stretch:120%;
  line-height:1.07; letter-spacing:-.012em;
  color:#FFF6ED;
  margin:0 0 .4em;
  max-width:19ch;
  text-wrap:balance;
}
.diapo-texte{
  color:#F3D9C2;
  max-width:48ch;
  margin-bottom:1.45rem;
}

.carrousel-btn{
  position:absolute;
  top:0; bottom:0; margin:auto 0;
  z-index:2;
  width:48px; height:48px;
  border:none; border-radius:50%;
  background:rgba(255,253,250,.92);
  color:var(--braise);
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:var(--ombre-douce);
  transition:background-color .15s ease, transform .15s ease;
}
.carrousel-btn:hover{ background:#fff; transform:scale(1.07); }
.carrousel-btn svg{ width:22px; height:22px; }
.carrousel-prec{ left:16px; }
.carrousel-suiv{ right:16px; }

.carrousel-points{
  position:absolute;
  left:0; right:0; bottom:18px;
  z-index:2;
  display:flex; justify-content:center;
  gap:.6rem;
}
.carrousel-points button{
  width:11px; height:11px;
  padding:0;
  border-radius:var(--r-pill);
  border:1.6px solid rgba(255,246,237,.85);
  background:transparent;
  cursor:pointer;
  transition:width .2s ease, background-color .2s ease, border-color .2s ease;
}
.carrousel-points button[aria-current="true"]{
  width:30px;
  background:var(--grad);
  border-color:transparent;
}

@media (max-width: 640px){
  .diapo{ min-height:440px; }
  .diapo-legende{ padding-block:2.8rem 4.2rem; }
  .carrousel-btn{ width:42px; height:42px; }
  .carrousel-prec{ left:10px; }
  .carrousel-suiv{ right:10px; }
}

/* ---------- Impression ---------- */
@media print{
  .entete, .pied, .wa-flottant, .cta, .menu-btn, .carrousel-btn, .carrousel-points{ display:none !important; }
  body{ background:#fff; color:#000; }
}