/* ---------------------------------------------------------------------------
   SUD-EST FERMETURES - feuille de style principale
   Charte issue du logo : jaune #3871C1, gris #4F4C4D
   --------------------------------------------------------------------------- */

:root{
  /* Charte CSV, relevee sur le logo : bleu #3871C1, jaune #FFF101,
     noir #231F20. Le BLEU est la couleur d'action - c'est ce qui distingue
     visuellement CSV de sa societe soeur, qui est en jaune et gris. */
  --bleu:         #3871C1;
  --bleu-sombre:  #2A579A;
  --bleu-nuit:    #0E2436;
  --bleu-pale:    #E8F2FA;
  --jaune:        #FFF101;
  --noir:         #231F20;
  --gris-fonce:   #3A3739;
  --gris-doux:    #75797F;
  --gris-clair:   #F4F6F8;
  --gris-bord:    #DFE4E9;
  --blanc:        #FFFFFF;
  --texte:        #2C3138;

  --largeur:      1180px;
  --rayon:        10px;
  --rayon-sm:     6px;
  --ombre:        0 1px 2px rgba(14,36,54,.06), 0 8px 24px rgba(14,36,54,.07);
  --ombre-forte:  0 2px 6px rgba(14,36,54,.08), 0 18px 44px rgba(14,36,54,.14);
  --transition:   .18s ease;
}

*,*::before,*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le menu hors-ecran (translateX(100%)) depasse a droite et cree une barre
     de defilement horizontale sur mobile. « clip » la supprime sans creer de
     conteneur de defilement, donc l'en-tete collant continue de fonctionner
     (ce que « hidden » casserait). */
  overflow-x: clip;
}

body{
  margin: 0;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

a{ color: var(--gris-fonce); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color: var(--bleu-nuit); }

h1,h2,h3,h4{
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  color: var(--bleu-nuit);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-transform: uppercase;
  font-weight: 700;
}
h1{ font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2{ font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4{ font-size: 1.15rem; }
p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

strong{ font-weight: 600; color: var(--bleu-nuit); }

/* --- ossature ------------------------------------------------------------ */

.wrap{ width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

.section{ padding: 72px 0; display: flow-root; }
.section + .section{ padding-top: 0; }
.section-alt{ background: var(--gris-clair); }
.section-alt + .section-alt{ padding-top: 0; }
/* Une section qui porte sa propre couleur de fond doit garder sa marge
   haute, sinon son contenu vient coller au bord du bandeau colore. */
.section-alt.section,
.section.bande-jaune,
.section.section-sombre{ padding-top: 72px; }
.section-alt + .section-alt.section{ padding-top: 0; }
.section-sombre{ background: var(--bleu-nuit); color: #D7D5D5; }
.section-sombre h2, .section-sombre h3{ color: var(--blanc); }

.section-head{ max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head h2{ margin-bottom: .35em; }
.section-head h2 span{ color: var(--gris-doux); }
.section-head p{ color: var(--gris-doux); font-size: 1.08rem; margin: 0; }

.eyebrow{
  display: inline-block;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .88rem;
  color: var(--gris-doux);
  margin-bottom: 10px;
}
.eyebrow::before{
  content: '';
  display: inline-block;
  width: 26px; height: 4px;
  background: var(--jaune);
  vertical-align: middle;
  margin-right: 10px;
  position: relative; top: -2px;
}

.grid{ display: grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* --- boutons ------------------------------------------------------------- */

.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.08rem;
  padding: 14px 26px;
  border-radius: var(--rayon-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primaire{ background: var(--bleu); color: var(--blanc); }
.btn-primaire:hover{ background: var(--bleu-sombre); color: var(--blanc); }
.btn-sombre{ background: var(--bleu-nuit); color: var(--blanc); }
.btn-sombre:hover{ background: #1A1919; color: var(--blanc); }
.btn-ligne{ background: transparent; color: var(--bleu-nuit); border-color: var(--gris-bord); }
.btn-ligne:hover{ border-color: var(--bleu-nuit); color: var(--bleu-nuit); }
.btn-clair{ background: var(--blanc); color: var(--bleu-nuit); }
.btn-clair:hover{ background: var(--gris-clair); color: var(--bleu-nuit); }

/* --- en-tete ------------------------------------------------------------- */

.bandeau-haut{
  background: var(--bleu-nuit);
  color: #C8C6C6;
  font-size: .92rem;
}
.bandeau-haut .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; min-height: 44px; flex-wrap: wrap;
  padding-top: 4px; padding-bottom: 4px;
}
.bandeau-droite{ gap: 22px; }
.bandeau-cta{
  display: inline-flex; align-items: center;
  background: var(--jaune); color: var(--noir) !important;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1rem; line-height: 1;
  padding: 9px 16px; border-radius: var(--rayon-sm);
  text-decoration: none; white-space: nowrap;
  transition: var(--transition);
}
.bandeau-cta:hover{ background: #E6DA00; color: var(--noir) !important; }
.bandeau-haut a{ color: var(--blanc); text-decoration: none; }
.bandeau-haut a:hover{ color: var(--jaune); }
.bandeau-liens{ display: flex; gap: 22px; align-items: center; }
.bandeau-liens span{ display: inline-flex; align-items: center; gap: 7px; }

.entete{
  position: sticky; top: 0; z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bord);
}
.entete .wrap{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px;
}
.marque img{ width: 168px; }
.marque{ text-decoration: none; flex-shrink: 0; }

.nav-principale{ display: flex; align-items: center; gap: 4px; }
.nav-principale a{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.02rem;
  color: var(--gris-fonce);
  text-decoration: none;
  padding: 9px 11px;
  border-radius: var(--rayon-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-principale a:hover{ background: var(--gris-clair); color: var(--bleu-nuit); }
.nav-principale a.actif{ color: var(--bleu-nuit); box-shadow: inset 0 -3px 0 var(--jaune); }
.nav-principale .btn{ margin-left: 10px; padding: 11px 20px; font-size: 1rem; }
.nav-principale .btn:hover{ background: var(--bleu-sombre); }

.burger{
  display: none;
  background: none; border: 0; padding: 10px;
  cursor: pointer; color: var(--bleu-nuit);
}
.burger svg{ display: block; }

/* --- fil d'Ariane -------------------------------------------------------- */

.fil{ background: var(--gris-clair); border-bottom: 1px solid var(--gris-bord); font-size: .92rem; }
.fil .wrap{ padding-top: 12px; padding-bottom: 12px; color: var(--gris-doux); }
.fil a{ color: var(--gris-doux); text-decoration: none; }
.fil a:hover{ color: var(--bleu-nuit); text-decoration: underline; }

/* --- banniere de page ---------------------------------------------------- */

.hero{
  background: var(--bleu-nuit);
  color: #D1CFCF;
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(16,116,188,.16) 0 3px, transparent 3px 18px);
  -webkit-mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
  pointer-events: none;
}
.hero .wrap{ position: relative; z-index: 1; max-width: 900px; }
.hero h1{ color: var(--blanc); margin-bottom: .35em; }
.hero p{ font-size: 1.18rem; max-width: 640px; margin: 0; }

/* accueil : banniere haute avec appel a l'action */
.hero-accueil{ padding: 104px 0 96px; }
.hero-accueil .actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-accueil .reperes{
  display: flex; gap: 34px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-accueil .repere strong{
  display: block;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 2.3rem; line-height: 1; color: var(--jaune);
}
.hero-accueil .repere span{ font-size: .96rem; color: #A5A2A2; }

/* --- cartes -------------------------------------------------------------- */

.carte{
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon);
  padding: 30px 28px;
  transition: var(--transition);
  display: flow-root;
}
.carte h3{ margin-bottom: .4em; }
.carte p{ color: var(--gris-doux); margin-bottom: 0; }

a.carte{ text-decoration: none; color: inherit; display: block; }
a.carte:hover{ border-color: var(--gris-doux); box-shadow: var(--ombre); transform: translateY(-2px); }

.carte-produit .vignette{
  background: var(--gris-clair);
  border-radius: var(--rayon-sm);
  margin: -30px -28px 24px;
  border-bottom: 4px solid var(--bleu);
  border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 26px;
  text-align: center;
}
.carte-produit .vignette svg{ width: 100%; height: auto; max-width: 200px; margin: 0 auto; }
.carte-produit .lien{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bleu-nuit);
}
a.carte:hover .lien{ color: var(--bleu-nuit); }
a.carte:hover .lien .fleche{ transform: translateX(4px); }
.lien .fleche{ display: inline-block; transition: var(--transition); }

.carte-atout{ border: 0; background: transparent; padding: 0; }
.carte-atout .puce{
  width: 52px; height: 52px; border-radius: var(--rayon-sm);
  background: var(--bleu-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.carte-atout .puce svg{ width: 26px; height: 26px; }

/* --- blocs deux colonnes ------------------------------------------------- */

.duo{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.duo-visuel{
  background: var(--gris-clair);
  border-radius: var(--rayon);
  padding: 40px;
  border-left: 8px solid var(--jaune);
}
.duo-visuel svg{ width: 100%; height: auto; }

.liste-cochee{ list-style: none; margin: 0 0 1.2em; padding: 0; }
.liste-cochee li{ position: relative; padding-left: 30px; margin-bottom: 10px; }
.liste-cochee li::before{
  content: ''; position: absolute; left: 0; top: .55em;
  width: 14px; height: 8px;
  border-left: 3px solid var(--bleu-nuit);
  border-bottom: 3px solid var(--bleu-nuit);
  transform: rotate(-45deg);
}

/* --- bandeau chiffres / appel a l'action --------------------------------- */

.bande-jaune{ background: var(--bleu); }
.bande-jaune h2{ color: var(--blanc); }
.bande-jaune p{ color: #D3E1F1; }

.cta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
}
.cta h2{ margin-bottom: .2em; }
.cta p{ margin: 0; color: var(--gris-fonce); }
.cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* --- encadres ------------------------------------------------------------ */

.encadre{
  background: var(--gris-clair);
  border-radius: var(--rayon);
  padding: 28px 30px;
  border-left: 6px solid var(--bleu);
}
.encadre h3{ margin-bottom: .35em; }
.encadre p:last-child{ margin-bottom: 0; }

.note{ font-size: .93rem; color: var(--gris-doux); }

/* --- prose (pages de texte) ---------------------------------------------- */

.prose{ max-width: 780px; }
.prose h2{ margin-top: 1.6em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin-top: 1.4em; }
.prose ul{ padding-left: 22px; }
.prose li{ margin-bottom: 8px; }

/* --- tableau ------------------------------------------------------------- */

.tableau-cadre{ overflow-x: auto; border: 1px solid var(--gris-bord); border-radius: var(--rayon); }
table{ width: 100%; border-collapse: collapse; font-size: .98rem; }
th, td{ padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--gris-bord); }
th{
  background: var(--gris-clair);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--bleu-nuit);
}
tr:last-child td{ border-bottom: 0; }

/* --- formulaire ---------------------------------------------------------- */

.champ{ margin-bottom: 18px; }
.champ label{
  display: block; margin-bottom: 6px;
  font-weight: 600; font-size: .95rem; color: var(--gris-fonce);
}
.champ input, .champ select, .champ textarea{
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--texte);
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu);
}
.champ textarea{ min-height: 150px; resize: vertical; }
.obligatoire{ color: #B3261E; }

.message-ok, .message-erreur{
  padding: 16px 20px; border-radius: var(--rayon-sm); margin-bottom: 24px;
}
.message-ok{ background: #E9F6EC; border-left: 5px solid #2E7D32; }
.message-erreur{ background: #FDECEA; border-left: 5px solid #B3261E; }

/* --- pied de page -------------------------------------------------------- */

.pied{ background: var(--bleu-nuit); color: #A5A2A2; padding: 60px 0 0; font-size: .96rem; }
.pied h4{
  color: var(--blanc); font-size: 1.05rem; letter-spacing: .06em; margin-bottom: 16px;
}
.pied a{ color: #C8C6C6; text-decoration: none; }
.pied a:hover{ color: var(--jaune); }
.pied .colonnes{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.pied ul{ list-style: none; margin: 0; padding: 0; }
.pied li{ margin-bottom: 9px; }
.pied .marque-pied img{ width: 170px; margin-bottom: 18px; }
.pied-bas{
  margin-top: 48px; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .9rem;
}

/* --- adaptatif ----------------------------------------------------------- */

@media (max-width: 1000px){
  .pied .colonnes{ grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .duo{ grid-template-columns: 1fr; gap: 34px; }
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1140px){
  .burger{ display: block; }
  .nav-principale{
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--blanc);
    flex-direction: column; align-items: stretch;
    padding: 92px 20px 30px;
    gap: 2px;
    box-shadow: var(--ombre-forte);
    transform: translateX(100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .nav-principale.ouverte{ transform: translateX(0); }
  .nav-principale a{ padding: 13px 14px; font-size: 1.15rem; }
  .nav-principale .btn{ margin: 14px 0 0; justify-content: center; }
  .voile{
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 40;
  }
  .voile.visible{ opacity: 1; pointer-events: auto; }
  body.nav-ouverte{ overflow: hidden; }
}

@media (max-width: 720px){
  body{ font-size: 16px; }
  .section{ padding: 52px 0; }
  .section-alt.section,
  .section.bande-jaune,
  .section.section-sombre{ padding-top: 52px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .hero{ padding: 54px 0; }
  .hero-accueil{ padding: 64px 0 60px; }
  .hero-accueil .reperes{ gap: 24px; }
  .bandeau-haut .wrap{ justify-content: center; text-align: center; }
  .cta{ flex-direction: column; align-items: flex-start; }
  .pied .colonnes{ grid-template-columns: 1fr; }
  .carte{ padding: 24px 22px; }
  .carte-produit .vignette{ margin: -24px -22px 20px; }
}

@media print{
  .bandeau-haut, .entete, .fil, .pied, .cta-actions{ display: none; }
  body{ font-size: 12pt; }
}

/* --- complements ---------------------------------------------------------- */

.saut-contenu{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bleu); color: var(--blanc);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--rayon-sm) 0;
}
.saut-contenu:focus{ left: 0; }

/* sous-menu deroulant */
.menu-deroulant{ position: relative; }
.menu-deroulant > a{ display: inline-flex; align-items: center; gap: 6px; }
.menu-deroulant .chevron{ transition: var(--transition); }
.menu-deroulant:hover .chevron{ transform: rotate(180deg); }
.sous-menu{
  position: absolute; top: 100%; left: 0;
  min-width: 280px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: var(--transition);
  z-index: 60;
}
.menu-deroulant:hover .sous-menu,
.menu-deroulant:focus-within .sous-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.sous-menu a{ display: block; padding: 10px 14px; font-size: 1rem; }
.sous-menu a.actif{ box-shadow: none; background: var(--gris-clair); }

@media (max-width: 1140px){
  .menu-deroulant .chevron{ margin-left: auto; }
  .menu-deroulant > a{ display: flex; width: 100%; }
  .sous-menu{
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 3px solid var(--jaune);
    border-radius: 0; margin: 2px 0 8px 14px; padding: 0 0 0 6px;
    display: none;
  }
  .menu-deroulant.ouvert .sous-menu{ display: block; }
}

/* La barre du haut se vide progressivement pour garder le bouton lisible.
   Selecteur a deux classes : « .bandeau-liens span » est plus specifique que
   « .bandeau-adresse » seul, et l'emporterait sinon. */
.bandeau-liens span, .bandeau-liens a{ white-space: nowrap; }
@media (max-width: 1140px){
  .bandeau-liens span.bandeau-adresse{ display: none; }
}
@media (max-width: 640px){
  /* on ne garde que le telephone et le bouton */
  .bandeau-liens span.bandeau-courriel{ display: none; }
  .bandeau-haut .wrap{ gap: 10px 14px; }
}

.hero h1 span{ color: var(--jaune); }
.hero-accueil .repere{ min-width: 120px; }

/* bandeau partenaire / marques */
.marques{ display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; }
.marques span{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris-doux); font-size: 1.15rem;
}

/* vignette de realisation (en attendant les photos) */
.vignette-photo{
  aspect-ratio: 4 / 3;
  background: var(--gris-clair);
  border: 1px dashed var(--gris-bord);
  border-radius: var(--rayon);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 8px; color: var(--gris-doux); text-align: center; padding: 20px;
  font-size: .92rem;
}
.vignette-photo svg{ width: 34px; height: 34px; opacity: .5; }

.chiffre{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 2.6rem; line-height: 1; display: block; color: var(--bleu-nuit);
}

/* --- realisations -------------------------------------------------------- */

.realisation{
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon);
  overflow: hidden;
}
.realisation img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.realisation figcaption{ padding: 24px 24px 26px; }
.realisation h3{ margin: 8px 0 .3em; }
.etiquette{
  display: inline-block;
  background: var(--jaune); color: var(--bleu-nuit);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; padding: 3px 10px; border-radius: 3px;
}

/* --- page contact -------------------------------------------------------- */

.bloc-contact{ text-align: center; }
.puce-contact{
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
}
.puce-contact svg{ width: 24px; height: 24px; }
.gros-lien{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.45rem; text-decoration: none;
  color: var(--bleu-nuit);
}
.gros-lien:hover{ text-decoration: underline; }
.erreur-champ{ color: #B3261E; font-size: .9rem; margin: -10px 0 14px; }
.piege{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ico-titre{ width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; }

/* --- corrections de mise en page ---------------------------------------- */

body{ overflow-x: clip; }

.cta > div:first-child{ flex: 1 1 480px; min-width: 0; }
.cta-actions{ flex: 0 0 auto; }
@media (max-width: 900px){
  .cta > div:first-child{ flex-basis: 100%; }
}

.puce.numero{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.9rem; color: var(--bleu-nuit); line-height: 1;
}

/* --- zone d'intervention -------------------------------------------------- */

.visuellement-cache{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.recherche-communes{ max-width: 520px; margin: 0 auto 40px; }
.recherche-communes input{
  width: 100%; font: inherit; font-size: 1.1rem;
  padding: 14px 18px;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon-sm);
  background: var(--blanc);
}
.recherche-communes input:focus{ outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--gris-doux); }
.recherche-communes .note{ margin: 8px 2px 0; min-height: 1.4em; }

.secteur{ margin-bottom: 36px; }
.secteur h3{ margin-bottom: 16px; padding-bottom: 10px; border-bottom: 3px solid var(--bleu); }
.communes{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 24px;
}
.communes li{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: var(--rayon-sm);
  background: var(--blanc); border: 1px solid var(--gris-bord);
}
.communes .cp{ color: var(--gris-doux); font-variant-numeric: tabular-nums; }


.pied-bas .credit{ color: #8E8B8B; }
.pied-bas .credit a{ color: #A5A2A2; }
.pied-bas .credit a:hover{ color: var(--jaune); }
@media (max-width: 900px){ .pied-bas{ flex-direction: column; gap: 8px; } }

/* --- boutons flottants ---------------------------------------------------- */

.fab-stack{
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.fab{
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 18px;
  border: 1px solid var(--gris-bord); border-radius: 27px;
  background: var(--blanc); color: var(--bleu-nuit);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre-forte);
  transition: var(--transition);
  white-space: nowrap;
}
.fab svg{ width: 22px; height: 22px; flex: 0 0 auto; }
.fab:hover{ background: var(--bleu-nuit); color: var(--blanc); border-color: var(--bleu-nuit);
            transform: translateY(-2px); }
.fab-tel{ background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.fab-tel:hover{ background: var(--bleu-sombre); color: var(--blanc); border-color: var(--bleu-sombre); }

@media (max-width: 720px){
  .fab-stack{ right: 12px; bottom: 12px; gap: 8px; }
  .fab{ height: 50px; width: 50px; padding: 0; justify-content: center; border-radius: 50%; }
  .fab-libelle{ display: none; }
}
@media print{ .fab-stack, .rappel-fond{ display: none !important; } }

/* --- fenetre « Etre rappele » --------------------------------------------- */

.rappel-fond{
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rappel-fond[hidden]{ display: none; }
.rappel-boite{
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon);
  border-top: 8px solid var(--bleu);
  padding: 32px 34px 28px;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--ombre-forte);
}
.rappel-boite h2{ font-size: 1.9rem; margin-bottom: .25em; }
.rappel-fermer{
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; color: var(--gris-doux);
  padding: 4px 10px; border-radius: var(--rayon-sm);
}
.rappel-fermer:hover{ color: var(--bleu-nuit); background: var(--gris-clair); }
.rappel-boite form{ margin-top: 18px; }
.rappel-message{ margin: 0 0 6px; font-size: .95rem; min-height: 1.3em; }
.rappel-message.ok{ color: #2E7D32; font-weight: 600; }
.rappel-message.ko{ color: #B3261E; font-weight: 600; }

.btn-sur-sombre{ color: var(--blanc); border-color: rgba(255,255,255,.35); }
.btn-sur-sombre:hover{ color: var(--bleu-nuit); background: var(--blanc); border-color: var(--blanc); }
.hero .hero-tel{
  margin-top: 32px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  color: #A5A2A2; font-size: 1rem;
}
.hero-tel a{
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.55rem; letter-spacing: .02em; line-height: 1;
  color: var(--jaune); text-decoration: none;
}
.hero-tel a:hover{ text-decoration: underline; color: var(--jaune); }

/* --- formulaire : choix du motif ------------------------------------------ */

fieldset{ border: 0; margin: 0 0 22px; padding: 0; }
fieldset legend{
  display: block; padding: 0; margin-bottom: 10px;
  font-weight: 600; font-size: .95rem; color: var(--gris-fonce);
}
fieldset legend .note{ font-weight: 400; }

.motif-choix{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.motif-carte{ position: relative; display: block; cursor: pointer; }
.motif-carte input{
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.motif-corps{
  display: block; height: 100%;
  padding: 18px 20px;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
  transition: var(--transition);
}
.motif-carte:hover .motif-corps{ border-color: var(--gris-doux); }
.motif-carte input:checked + .motif-corps{
  border-color: var(--bleu-nuit);
  box-shadow: inset 0 0 0 3px var(--bleu);
}
.motif-carte input:focus-visible + .motif-corps{ outline: 3px solid var(--bleu); outline-offset: 2px; }
.motif-titre{
  display: block;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.25rem; color: var(--bleu-nuit); margin-bottom: 4px;
}
.motif-desc{ display: block; font-size: .92rem; color: var(--gris-doux); line-height: 1.45; }

.cases{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; }
.cases-ligne{ grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); }
.case{ display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 4px 0; }
.case input{ width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--bleu-nuit); flex: 0 0 auto; }
.case span{ font-size: .97rem; }

.bloc-motif[hidden]{ display: none; }

@media (max-width: 620px){
  .motif-choix{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  #formulaire{ grid-template-columns: 1fr !important; }
}

/* Bandeau d'appel a l'action : le bloc de texte et le bloc de boutons font
   la meme hauteur, sinon la derniere ligne de texte depasse sous les boutons. */
.cta{ align-items: stretch; }
.cta > div:first-child{ display: flex; flex-direction: column; justify-content: center; }
.cta-actions{ align-items: stretch; }
.cta-actions .btn{ align-self: stretch; }

@media (max-width: 720px){
  /* en colonne, des boutons etires deviennent enormes : on revient a la
     hauteur normale, mais sur toute la largeur */
  .cta{ align-items: stretch; }
  .cta-actions{ width: 100%; flex-direction: column; }
  .cta-actions .btn{ align-self: auto; justify-content: center; }
}

/* --- selection du texte ---------------------------------------------------
   On empeche la selection sur ce qui est de l'interface : titres, libelles de
   champs, boutons, menu, cartes cliquables. Un double-clic ou un glisser sur
   ces elements surlignait tout en gris, ce qui fait sale.

   En revanche on laisse selectionnable tout ce qu'un visiteur peut vouloir
   copier : les paragraphes, les listes, le telephone, l'adresse, le courriel,
   les noms de communes et le contenu des champs de saisie. Bloquer la copie
   du numero de telephone serait se tirer une balle dans le pied.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
label, legend,
.eyebrow,
.btn, button,
.nav-principale, .bandeau-liens,
.motif-carte, .motif-titre, .motif-desc,
.case span,
.fab, .fab-libelle,
.fil,
th,
.lien, .repere span,
.rappel-fermer,
.burger{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ce qui reste copiable, meme a l'interieur d'un bloc ci-dessus */
input, textarea, select,
.gros-lien, .hero-tel a,
a[href^="tel:"], a[href^="mailto:"],
.communes li, .pied li{
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

/* Le bouton flottant « Appeler » est un lien tel: : la regle ci-dessus le
   rendrait selectionnable. On repasse derriere pour les boutons flottants,
   dont le libelle n'a aucune raison d'etre copie. */
.fab, .fab *, .fab[href], .fab[href] *{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media (max-width: 620px){
  /* en colonne, des boutons de largeurs differentes font desordre */
  .hero-accueil .actions{ flex-direction: column; align-items: stretch; }
  .hero-accueil .actions .btn{ justify-content: center; }
  .hero .hero-tel{ gap: 6px; margin-top: 26px; }
}

/* --- bulle « Numéro copié » ------------------------------------------------
   Affichee deux secondes apres un clic sur un numero de telephone, sur
   ordinateur uniquement. Sur mobile le lien tel: garde son comportement
   normal : il ouvre le clavier d'appel.
   -------------------------------------------------------------------------- */

.tel-bulle{
  position: absolute;
  z-index: 500;
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .88rem;
  padding: 8px 14px;
  border-radius: var(--rayon-sm);
  border-left: 4px solid var(--bleu);
  box-shadow: var(--ombre-forte);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.tel-bulle.sous{ transform: translateY(-4px); }
.tel-bulle.ouverte, .tel-bulle.sous.ouverte{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .tel-bulle{ transition: none; }
}

.certificats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

/* --- badge RGE de l'en-tete ------------------------------------------------ */

.badge-partenaire{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px;
  margin-right: auto; margin-left: 22px;
  border: 1px solid var(--gris-bord); border-radius: var(--rayon-sm);
  background: var(--blanc);
  text-decoration: none; flex-shrink: 0;
  transition: var(--transition);
}
.badge-partenaire:hover{ border-color: var(--gris-doux); box-shadow: var(--ombre); }
.badge-partenaire img{ width: 104px; height: auto; display: block; }
.badge-partenaire-texte{
  display: none;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: .92rem; line-height: 1.15; color: var(--gris-doux);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.badge-partenaire-texte strong{ display: block; color: var(--bleu-nuit); font-weight: 700; font-size: 1.02rem; }

/* sous 1200 px le libelle disparait, le logo reste */
@media (max-width: 1080px){
  .badge-partenaire-texte{
  display: none; display: none; }
  .badge-partenaire{ margin-left: 16px; padding: 5px 8px; }
}
/* en mode menu deroulant, le badge se place avant le bouton hamburger */
@media (max-width: 1140px){
  .badge-partenaire{ margin-left: auto; margin-right: 4px; }
}
@media (max-width: 380px){
  .badge-partenaire{ display: none; }
}

/* --- depot de fichiers ----------------------------------------------------- */

.depot{
  position: relative;
  border: 2px dashed var(--gris-bord);
  border-radius: var(--rayon);
  background: var(--gris-clair);
  padding: 24px 20px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}
.depot:hover, .depot.survol{ border-color: var(--gris-doux); background: #EFEEEE; }
.depot.survol{ border-color: var(--bleu-nuit); }
.depot input[type=file]{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.depot input[type=file]:focus-visible{ outline: 3px solid var(--bleu); outline-offset: 2px; }
.depot-invite{ margin: 0; pointer-events: none; color: var(--gris-doux); font-size: .96rem; }
.depot-invite strong{ color: var(--bleu-nuit); }

.depot-liste{ list-style: none; margin: 12px 0 0; padding: 0; }
.depot-liste li{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--blanc);
  border: 1px solid var(--gris-bord); border-radius: var(--rayon-sm);
  font-size: .94rem;
}
.depot-liste .vignette{
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 4px; object-fit: cover; background: var(--gris-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 700;
  font-size: .78rem; color: var(--gris-doux);
}
.depot-liste .nom{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-liste .poids{ color: var(--gris-doux); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.depot-liste .retirer{
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--gris-doux); padding: 2px 6px; border-radius: 4px;
}
.depot-liste .retirer:hover{ color: #B3261E; background: #FDECEA; }
.depot-liste li.trop-gros{ border-color: #E9B4AE; background: #FDECEA; }


/* --- entree « Accueil » en icone ------------------------------------------
   Une maison prend deux fois moins de place que le mot, et reste comprise de
   tout le monde - y compris des visiteurs qui ne devineraient pas qu'un logo
   ramene a l'accueil. Le mot reste present pour les lecteurs d'ecran et en
   infobulle au survol.
   -------------------------------------------------------------------------- */
.lien-accueil{ display: inline-flex; align-items: center; }
.lien-accueil svg{ width: 21px; height: 21px; display: block; }
@media (max-width: 1140px){
  /* dans le menu deroulant, on retrouve le mot : il y a la place */
  .lien-accueil svg{ margin-right: 10px; }
  .lien-accueil .visuellement-cache{
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
  }
}


/* --- renvoi vers la societe soeur, dans le pied de page ------------------- */

.pied-soeur-titre{
  margin: 26px 0 10px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; color: #8E8B8B;
}
.pied-soeur{
  display: block;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--rayon-sm);
  text-decoration: none;
  transition: var(--transition);
  max-width: 250px;
}
.pied-soeur:hover{ border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); }
.pied-soeur img{ width: 150px; height: auto; margin-bottom: 10px; }
.pied-soeur span{ display: block; font-size: .88rem; line-height: 1.4; color: #A5A2A2; }
.pied-soeur:hover span{ color: #D5D3D3; }