/* ================================================================
   BRAMAH Construction Sàrl — feuille de style
   Thème anthracite, accent jaune.
   Toutes les couleurs se règlent dans le bloc :root ci-dessous.
   ================================================================ */

:root{
  --bg:#131416;        /* encre : fond principal */
  --bg-alt:#191b1d;    /* encre claire : sections alternées */
  --panel:#1d2023;     /* cartes, formulaire, vignettes */
  --ink:#f2f3f4;       /* texte principal */
  --ink-soft:#b9bcc0;  /* texte secondaire */
  --ink-faint:#9a9ea3; /* mentions discrètes */
  --line:#2c2f33;      /* filets de séparation */
  --accent:#cdced0;    /* gris de la carte de visite : aplats, boutons */
  --accent-txt:#cdced0;/* le même, lisible en texte sur fond sombre */
  --btn-ink:#131416;   /* texte posé sur les aplats */
  --gris:#cdced0;      /* gris signature de la carte de visite */
  --gris-doux:#22252a; /* aplats discrets (bandeaux, encadrés) */
  --trait:#9a9ea3;     /* illustrations : trait principal */
  --trait-2:#4c5055;   /* illustrations : trait secondaire */
  /* Typographie : Avenir Next sur Mac, Segoe UI sur Windows, Arial en dernier recours.
     Pour revenir aux titres à empattements, remettez ici :
     --serif:Georgia,"Times New Roman",serif;  et  h1,h2,h3{font-weight:400;} plus bas. */
  --sans:"Avenir Next",Avenir,"Segoe UI",Arial,Helvetica,sans-serif;
  --serif:"Avenir Next",Avenir,"Segoe UI",Arial,Helvetica,sans-serif;
  --photo-accueil:url("../images/fond-accueil-beton.jpg");  /* photo de bandeau : un seul endroit à changer */
  --max:1080px;
  --gutter:30px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}  /* l'en-tête collant ne masque plus les titres */
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;line-height:1.25;letter-spacing:-0.015em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.plain{list-style:none;margin:0;padding:0;}

.kicker{
  margin:0 0 20px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-txt);font-weight:600;
}
.btn{
  display:inline-block;background:var(--accent);color:var(--btn-ink);text-decoration:none;
  padding:15px 32px;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  border:0;cursor:pointer;font-family:inherit;border-radius:3px;transition:opacity .2s;
}
.btn:hover{opacity:.85;}
.link-arrow{text-decoration:none;font-size:14.5px;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;}
.link-arrow::after{content:" →";}
.link-arrow:hover{color:var(--ink);border-color:var(--accent);}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(19,20,22,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px;}
.brand{display:flex;align-items:center;text-decoration:none;}
/* Logotype : largeur fixe, hauteur automatique. Pour l'agrandir, changez la largeur. */
.brand img{width:172px;height:auto;filter:invert(1) brightness(.88);}
.bar nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.bar nav a{text-decoration:none;font-size:14px;color:var(--ink-soft);}
.bar nav a:hover{color:var(--accent-txt);}

/* Bascule sombre / clair */
.actions{display:flex;align-items:center;gap:14px;}
.bascule{
  display:grid;place-items:center;width:38px;height:38px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-soft);cursor:pointer;
  transition:color .2s,border-color .2s;
}
.bascule:hover{color:var(--accent-txt);border-color:var(--accent);}
.bascule:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.bascule svg{display:block;}

/* Sélecteur de langue */
.langue{
  display:grid;place-items:center;height:38px;padding:0 13px;
  background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-soft);text-decoration:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  transition:color .2s,border-color .2s;
}
.langue:hover{color:var(--accent-txt);border-color:var(--accent);}
.langue:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.bascule .ic-soleil{display:none;}
body.clair .bascule .ic-lune{display:none;}
body.clair .bascule .ic-soleil{display:block;}
.burger{display:none;background:none;border:0;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;}

/* Hero */
.hero-media{
  /* Photo d'accueil. Pour la remplacer : déposez votre image dans images/
     et changez le nom de fichier ci-dessous. Le dégradé sombre au-dessus
     assure la transition avec le fond de la page. */
  height:440px;
  background:
    linear-gradient(180deg, rgba(38,41,45,.30) 0%, rgba(38,41,45,0) 34%, rgba(38,41,45,.86) 100%),
    var(--photo-accueil) center 42% / cover no-repeat,
    var(--bg);
  border-bottom:1px solid var(--line);
}
.photo-hint{position:absolute;left:-9999px;}  /* masqué : le bandeau a son illustration */
.hero-body{padding:80px 0 84px;}
.hero h1{font-size:clamp(32px,4.8vw,52px);margin-bottom:28px;}
.lead{font-size:18.5px;color:var(--ink-soft);max-width:62ch;margin:0 0 36px;}
.hero-cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin:0;}

/* --- Arrivée de la page d'accueil -------------------------------------
   Le logo de l'en-tête est une image fixe (images/logo-bramah.webp).
   Ici : le sur-titre, les lignes du titre, le chapô et les boutons.
   Pour tout désactiver, supprimez ce bloc jusqu'au commentaire de fin. */
.hero .kicker{opacity:0;animation:bc-kicker .80s ease-out both;}
@keyframes bc-kicker{from{opacity:0;letter-spacing:.46em;}
                     to{opacity:1;letter-spacing:.24em;}}

.h1-anime .ln{display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;}
.h1-anime .ln i{display:block;font-style:normal;
  animation:bc-ligne .85s cubic-bezier(.19,1,.22,1) both;
  animation-delay:calc(.30s + var(--i) * .10s);}
@keyframes bc-ligne{from{transform:translateY(105%);}to{transform:none;}}

.hero .lead{opacity:0;animation:bc-monte .70s ease-out both;animation-delay:.72s;}
.hero-cta{opacity:0;animation:bc-monte .70s ease-out both;animation-delay:.86s;}
@keyframes bc-monte{from{opacity:0;transform:translateY(14px);}
                    to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .hero .kicker,.h1-anime .ln i,.hero .lead,.hero-cta{
    animation:none;opacity:1;transform:none;letter-spacing:inherit;}
}
/* --- fin de l'arrivée de la page d'accueil --------------------------- */

/* Chiffres */
.chiffres{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt);}
.chiffres-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.chiffres-grid > div{padding:42px 24px;text-align:center;border-left:1px solid var(--line);}
.chiffres-grid > div:first-child{border-left:0;}
.chiffres b{display:block;font-family:var(--serif);font-weight:600;font-size:38px;line-height:1;color:var(--accent-txt);}
.chiffres span{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.08em;color:var(--ink-faint);}

/* Sections */
section{padding:100px 0;}
.hero{padding:0;}   /* la photo d'accueil démarre juste sous l'en-tête */
.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sec-head{max-width:60ch;margin:0 0 60px;}
.sec-head h1,.sec-head h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:18px;}
.sec-intro{color:var(--ink-soft);margin:0;}

/* Prestations */
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;}
.list article{padding:32px 0;border-top:1px solid var(--line);}
.list .num{font-size:12px;letter-spacing:.16em;color:var(--accent-txt);}
.list h3{font-size:20px;margin:12px 0 12px;}
.list p{margin:0;font-size:15.5px;color:var(--ink-soft);}

/* Méthode */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.etapes li{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:28px 24px;}
/* Ligne du haut : le numéro à gauche, la norme SIA alignée à droite. */
.etapes li{display:grid;grid-template-columns:1fr auto;align-items:center;}
/* Même présentation que les numéros des cartes de prestations. */
.etape-num{font-size:12.5px;letter-spacing:.14em;color:var(--ink-faint);font-weight:600;}
.etape-sia{justify-self:end;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
           color:var(--ink-faint);white-space:nowrap;}
.etapes h3,.etapes p{grid-column:1 / -1;}
.etapes h3{font-size:18px;margin:10px 0 10px;}
.etapes p{margin:0;font-size:14.5px;color:var(--ink-soft);}

/* Zones */
.zones li{display:grid;grid-template-columns:.5fr 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);}
.zones li:last-child{border-bottom:1px solid var(--line);}
.zones b{font-family:var(--serif);font-size:18px;font-weight:600;}
.zones span{color:var(--ink-soft);font-size:15.5px;}

/* Domaines */
.grid-proj{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
/* Numéro au-dessus de la vignette, même présentation que les autres sections. */
#domaines .grid-proj .num{display:block;font-size:12.5px;letter-spacing:.14em;
  color:var(--ink-faint);font-weight:600;margin-bottom:12px;}
@media (max-width:640px){ #prestations .list{grid-template-columns:1fr;} }
.vignette{aspect-ratio:4/3;background:var(--panel);border:1px dashed var(--line);display:grid;place-items:center;margin-bottom:18px;border-radius:4px;}
/* Illustrations au trait des typologies : elles suivent le thème clair/sombre */
svg.vignette{width:100%;height:auto;display:block;border-style:solid;}
.vignette span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.grid-proj h3{font-size:18px;margin-bottom:8px;}
.grid-proj p{margin:0;font-size:15px;color:var(--ink-soft);}

/* Bureau */
.about{display:grid;grid-template-columns:.62fr 1fr;gap:64px;align-items:start;}
/* Section « À propos » sans photo : le texte occupe la largeur, en colonne lisible */
.about.sans-photo{grid-template-columns:1fr;gap:0;}
.about.sans-photo .texte-libre p{max-width:70ch;}
/* À propos, grand écran : chapeau à gauche (reste visible au défilement),
   texte à droite ; la largeur est occupée sans dépasser ~70 caractères par ligne. */
@media (min-width:900px){
  #apropos .sec-head{max-width:none;}
  #apropos .sec-head h1{max-width:30em;}
  .about.sans-photo .texte-libre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(40px,6vw,88px);align-items:start;}
  .about.sans-photo .texte-libre > p{grid-column:2;max-width:none;}
  .about.sans-photo .texte-libre > p:first-child{grid-column:1;grid-row:1 / span 12;
    position:sticky;top:120px;margin:0;}
}
.portrait-img{aspect-ratio:3/4;}
.texte-libre p{margin:0 0 22px;color:var(--ink-soft);font-size:16.5px;max-width:62ch;}
.texte-libre p:first-child{
  font-size:19.5px;color:var(--ink);line-height:1.65;margin-bottom:26px;
}
.texte-libre p:last-child{margin-bottom:0;}

/* FAQ */
.faq{max-width:78ch;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:26px 44px 26px 0;font-family:var(--serif);font-size:18.5px;font-weight:600;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:8px;top:24px;font-family:var(--sans);font-size:22px;color:var(--accent-txt);}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{color:var(--accent-txt);}
.faq details p{margin:0 0 28px;color:var(--ink-soft);font-size:15.5px;max-width:70ch;}

/* Contact */
.contact{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:stretch;}

.coord{font-style:normal;}
.coord-line{margin:0 0 26px;}
.coord-line span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.coord a{text-decoration:none;border-bottom:1px solid var(--line);}
.coord a:hover{color:var(--accent-txt);border-color:var(--accent);}
form{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:34px 32px;}
.field{margin:0 0 20px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--ink-faint);}
input,select,textarea{width:100%;font:inherit;font-size:15.5px;padding:12px 14px;border:1px solid var(--line);background:#2f3438;color:var(--ink);border-radius:3px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
textarea{min-height:120px;resize:vertical;}
.submit-row{margin:30px 0 0;}
.form-note{font-size:13.5px;color:var(--ink-faint);margin:16px 0 0;}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:66px 0 28px;font-size:15px;color:var(--ink-soft);}
.foot{display:grid;grid-template-columns:1.6fr auto;gap:44px 60px;align-items:start;}
.foot p{margin:0;}
.foot-brand{margin-bottom:18px !important;}
.foot-brand img{width:196px;height:auto;opacity:.85;filter:invert(1) brightness(.88);}
.foot a{text-decoration:none;}
.foot a:hover{color:var(--accent);}
.foot li{padding:4px 0;}
.foot-bottom{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);}
.foot-droits{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;}
.foot-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.foot-legal .sep{color:var(--ink-faint);opacity:.55;}
.foot-legal a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:color .2s,border-color .2s;}
.foot-legal a:hover{color:var(--accent-txt);border-bottom-color:var(--accent);}
.foot-legal a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (max-width:900px){
  .grid-proj,.etapes{grid-template-columns:repeat(2,1fr);}
  .list{grid-template-columns:1fr;gap:0;}
  .about,.contact,.foot{grid-template-columns:1fr;gap:44px;}
  .chiffres-grid{grid-template-columns:repeat(2,1fr);}
  .zones li{grid-template-columns:1fr;gap:6px;}
}
@media (max-width:640px){
  :root{--gutter:22px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
  .foot-droits{gap:6px 12px;}
  section{padding:66px 0;}
  .hero-media{height:220px;}
  .grid-proj,.etapes,.row2{grid-template-columns:1fr;}
  .burger{display:block;}
  .bar{gap:12px;}
  .actions{gap:8px;}
  .brand img,.brand svg:not(.vignette){width:130px;}
  .langue{padding:0 10px;}
  .bascule{width:34px;height:34px;}
  .bar nav ul{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--gutter) 16px;}
  .bar nav ul.open{display:flex;}
  .bar nav li{padding:13px 0;border-bottom:1px solid var(--line);}
}

/* Plan d'accès (page Contact) */
.carte-bloc{margin-top:58px;max-width:none;}
.carte{position:relative;height:340px;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:var(--panel);}
.carte-adresse{position:absolute;inset:0;display:grid;place-content:center;margin:0;padding:24px;
  text-align:center;color:var(--ink-soft);line-height:1.8;}
.carte iframe{position:relative;display:block;width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.92) contrast(.86) brightness(1.06);}
.carte-liens{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;font-size:14px;}
.carte-liens a{color:var(--accent-txt);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:border-color .2s;}
.carte-liens a:hover{border-bottom-color:var(--accent);}
.carte-liens a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.carte-liens .sep{color:var(--ink-faint);opacity:.55;}
@media (max-width:640px){ .carte{height:240px;} .carte-bloc{margin-top:44px;} }

/* Signature de la section À propos */
.texte-libre .signature{margin-top:38px;padding-top:26px;border-top:1px solid var(--line);
  color:var(--ink-soft);}
.texte-libre .signature strong{color:var(--ink);letter-spacing:.02em;}
.texte-libre .signature em{font-style:normal;color:var(--accent-txt);}

/* Mentions légales */
.mentions{padding:72px 0 80px;border-top:1px solid var(--line);background:var(--bg-alt);}
.mentions h1,.mentions h2{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin:0 0 30px;}
.mentions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 36px;}
.mentions p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-soft);}
.mentions .m-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;}
.mentions a{color:var(--ink-soft);}
.mentions a:hover{color:var(--accent-txt);}
.m-note{margin-top:28px!important;max-width:88ch;font-size:13px!important;color:var(--ink-faint)!important;}
#confidentialite{border-top:1px solid var(--line);background:var(--bg);}
/* Pages autonomes : mentions légales, politique de confidentialité */
.page-legale{background:var(--bg);border-top:0;padding:74px 0 96px;}
.page-legale h1,.page-legale h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.015em;text-transform:none;
  color:var(--ink);font-weight:600;margin:0 0 42px;}
.foot-legal a[aria-current="page"]{color:var(--accent-txt);border-bottom-color:var(--accent);}
#confidentialite .m-note strong{color:var(--ink-soft);font-weight:600;}
@media (max-width:900px){ .mentions-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .mentions{padding:56px 0 64px;} .mentions-grid{grid-template-columns:1fr;gap:26px;} }

/* Lien d'évitement (accessibilité) */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--btn-ink);padding:10px 16px;z-index:100;}
.skip:focus{left:0;}

/* Impression */
@media print{
  :root{--bg:#fff;--bg-alt:#fff;--panel:#fff;--ink:#000;--ink-soft:#333;--ink-faint:#666;--line:#ccc;}
  .site-header,.hero-media,.hero-cta,form,.skip,.vignette{display:none;}
  body{font-size:12pt;}
  section{padding:20pt 0;page-break-inside:avoid;}
  .faq details{display:block;}
}



/* ---------- Notre approche ---------- */
.engagements{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;}
.engagements article{padding:32px 0;border-top:1px solid var(--line);}
.eng-num{font-size:12.5px;letter-spacing:.14em;color:var(--ink-faint);font-weight:600;line-height:1;}
/* Engagements : cases dépliables au clic, sans signe « + ». */
.engagements summary{display:block;cursor:pointer;list-style:none;}
.engagements summary::-webkit-details-marker{display:none;}
.engagements summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.engagements h3{font-size:20px;margin:12px 0 12px;}
.engagements p{margin:0;font-size:15.5px;color:var(--ink-soft);}

/* ---------- Pour qui ---------- */
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
         background:var(--line);border:1px solid var(--line);}
.clients article{background:var(--panel);padding:30px 28px;}
.clients h3{font-size:19px;margin-bottom:12px;}
.clients p{margin:0;font-size:15.5px;color:var(--ink-soft);}

/* ---------- Réalisations ---------- */
.realisations .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
                    color:var(--accent-txt);margin:0 0 10px;}
.note-realisations{margin:44px 0 0;padding-left:20px;border-left:2px solid var(--line);
                   color:var(--ink-faint);font-size:14.5px;max-width:74ch;}

/* ---------- Honoraires (section retirée du site, styles conservés) ---------- */
.honoraires{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.honoraires article{border-top:3px solid var(--accent);padding-top:22px;}
.honoraires h3{font-size:20px;margin-bottom:6px;}
.honoraires .quand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
                   color:var(--accent-txt);margin:0 0 14px;}
.honoraires p{margin:0;font-size:15px;color:var(--ink-soft);}
.note-honoraires{margin:44px 0 0;padding-left:20px;border-left:2px solid var(--accent);
                 color:var(--ink-soft);font-size:15.5px;max-width:74ch;}

@media (max-width:900px){
  .engagements,.clients,.honoraires{grid-template-columns:1fr;gap:0;}
  .clients{gap:2px;}
  .honoraires{gap:34px;}
}

/* ================================================================
   MODE CLAIR
   Activé par le bouton de l'en-tête : la classe « clair » est
   posée sur <body> et redéfinit les mêmes variables.
   ================================================================ */
body.clair{
  --bg:#ffffff;
  --bg-alt:#f4f4f6;      /* blanc cassé de la carte */
  --panel:#ffffff;
  --ink:#111214;         /* encre de la carte */
  --ink-soft:#4a4d52;
  --ink-faint:#6b6f75;
  --line:#dcdde0;
  --accent:#111214;      /* aplats : encre, comme le texte de la carte */
  --accent-txt:#5f6368;  /* sur-titres et liens : gris de lecture */
  --btn-ink:#ffffff;     /* texte posé sur les aplats */
  --gris:#cdced0;        /* gris signature de la carte de visite */
  --gris-doux:#eceded;   /* aplats discrets (bandeaux, encadrés) */
  --trait:#6b6f75;
  --trait-2:#b6b8bc;
}
/* en-tête translucide */
body.clair .site-header{background:rgba(255,255,255,.92);}
/* Le logotype est fourni en traits sombres : on l'éclaircit sur fond sombre,
   et on le laisse tel quel en thème clair. */
body.clair .brand img,
body.clair .brand svg,
body.clair .foot-brand img,
body.clair .foot-brand svg{filter:none;}
/* le dégradé du bandeau photo doit fondre vers le blanc */
body.clair .hero-media{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.92) 100%),
    var(--photo-accueil) center 42% / cover no-repeat,
    var(--bg);
}
/* champs de saisie */
body.clair input,
body.clair select,
body.clair textarea{background:#ffffff;}
/* cartes et formulaire : une ombre discrète remplace le contraste de fond */
body.clair form,
body.clair .etapes li{box-shadow:0 1px 3px rgba(21,24,26,.06);}
body.clair .vignette{background:#eef0f1;border-color:#d7dcdf;}
body.clair .vignette span{color:#5f686e;}


/* ===================== VARIANTE V2 ===================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* 1. Accueil plein écran : le titre passe sur la photo */
.hero{display:grid;}
.hero-media{grid-area:1/1;height:auto;min-height:min(calc(100svh - 77px),820px);border-bottom:0;
  background:
    linear-gradient(180deg, rgba(18,20,23,.62) 0%, rgba(18,20,23,.22) 22%,
                    rgba(18,20,23,.58) 52%, rgba(18,20,23,.88) 82%, var(--bg) 100%),
    var(--photo-accueil) center 46% / cover no-repeat, var(--bg);}
.hero-body{grid-area:1/1;align-self:end;position:relative;z-index:2;
  padding:96px 0 clamp(52px,7vh,92px);}
.hero h1{font-size:clamp(30px,min(4.6vw,6.4vh),54px);margin-bottom:clamp(12px,2vh,20px);
  text-shadow:0 2px 26px rgba(14,16,18,.62);}
.hero .lead{color:#dde4e8;max-width:46ch;margin-bottom:clamp(16px,2.6vh,26px);
  font-size:clamp(16px,min(1.45vw,2.1vh),18.5px);
  text-shadow:0 1px 16px rgba(14,16,18,.62);}
.hero .kicker{margin-bottom:clamp(12px,2vh,20px);}
.hero .kicker{text-shadow:0 1px 12px rgba(14,16,18,.7);}

/* 2. « Nous accompagnons … » */
.accompagne{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 clamp(18px,2.8vh,30px);font-size:16.5px;color:#ccd4d9;
  text-shadow:0 1px 14px rgba(14,16,18,.6);opacity:0;
  animation:bc-monte .7s ease-out both;animation-delay:.80s;}
.acc-lbl{color:var(--ink-faint);letter-spacing:.02em;}
.roue{display:inline-block;height:1.5em;overflow:hidden;vertical-align:bottom;}
.roue .pile{display:block;animation:roue 15s cubic-bezier(.76,0,.24,1) infinite;}
.roue i{display:block;height:1.5em;line-height:1.5em;font-style:normal;font-weight:600;
  color:var(--accent-txt);white-space:nowrap;}
@keyframes roue{
  0%,15%   {transform:translateY(0);}
  20%,35%  {transform:translateY(-1.5em);}
  40%,55%  {transform:translateY(-3em);}
  60%,75%  {transform:translateY(-4.5em);}
  80%,95%  {transform:translateY(-6em);}
  100%     {transform:translateY(-7.5em);}
}

/* 3. Invitation à descendre */
.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:1px solid rgba(255,255,255,.38);border-radius:14px;
  display:block;opacity:0;animation:bc-monte .8s ease-out both;animation-delay:1.3s;}
.cue span{position:absolute;left:50%;top:9px;width:3px;height:7px;margin-left:-1.5px;
  border-radius:2px;background:var(--accent);animation:cue 1.9s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(13px);opacity:.25;}}
body.clair .cue{border-color:rgba(255,255,255,.5);}

/* 4. Prestations dépliables */
#prestations .list{align-items:start;gap:18px 22px;}
.anim #prestations article.depliable{cursor:pointer;border:1px solid var(--line);border-radius:4px;
  padding:26px 28px;background:var(--panel);transition:border-color .25s,transform .25s;}
.anim #prestations article.depliable:hover{border-color:var(--trait-2);transform:translateY(-2px);}
.anim #prestations article.depliable h3{display:flex;align-items:flex-start;
  justify-content:space-between;gap:18px;margin:0;}
.anim #prestations article.depliable h3::after{content:"";flex:none;width:13px;height:13px;
  margin-top:.45em;border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);transition:transform .3s;}
.anim #prestations article.depliable.ouvert h3::after{transform:rotate(-135deg);}
.anim #prestations article.depliable > p:last-child{
  display:grid;grid-template-rows:0fr;opacity:0;margin:0;
  transition:grid-template-rows .32s ease,opacity .25s,margin .32s;}
.anim #prestations article.depliable > p:last-child > span{overflow:hidden;display:block;}
.anim #prestations article.depliable.ouvert > p:last-child{grid-template-rows:1fr;opacity:1;margin-top:14px;}
#prestations article.depliable{--rien:0;}

/* 5. Apparition au défilement */
.anim .app{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);}
.anim .app.vu{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .anim .app{opacity:1;transform:none;transition:none;}
  /* La liste « Nous accompagnons » continue de changer un mot à la fois, mais
     par bascule instantanée, sans glissement : pas de mouvement, donc conforme
     au réglage « réduire les animations » de Windows / macOS. */
  .roue .pile{animation-timing-function:steps(1,end);}
  .cue span{animation:none;}
  .accompagne{opacity:1;animation:none;}
}
@media (max-width:640px){
  .hero-media{min-height:calc(100svh - 77px);
    background:
      linear-gradient(180deg, rgba(16,18,21,.60) 0%, rgba(16,18,21,.34) 18%,
                      rgba(16,18,21,.76) 46%, rgba(16,18,21,.93) 78%, var(--bg) 100%),
      var(--photo-accueil) center 46% / cover no-repeat, var(--bg);}
  .accompagne{font-size:15.5px;gap:8px;}
  .cue{display:none;}
  #prestations article.depliable{padding:20px 20px;}
}

/* ---- Page d'accueil : exactement une fenêtre, rien à faire défiler ---- */
body.accueil{min-height:100svh;display:flex;flex-direction:column;}
body.accueil main{flex:1 0 auto;display:flex;flex-direction:column;}
body.accueil .hero{flex:1 1 auto;min-height:0;display:grid;}
body.accueil .hero-media{min-height:0;}
body.accueil .hero-body{padding:clamp(26px,5vh,72px) 0 clamp(30px,5.5vh,72px);}
body.accueil .site-footer{flex:none;padding:0 0 clamp(14px,2vh,26px);}
body.accueil .foot-bottom{margin-top:0;padding:18px 0;border-top:1px solid var(--line);}
@media (max-width:640px){
  body.accueil .foot-bottom{padding:14px 0;}
}
/* écrans peu hauts : on resserre pour rester dans une seule fenêtre */
@media (max-height:720px){
  body.accueil .hero .kicker{margin-bottom:10px;}
  body.accueil .hero .lead{font-size:15.5px;line-height:1.62;margin-bottom:14px;}
  body.accueil .accompagne{font-size:15px;margin-bottom:16px;}
  body.accueil .hero-cta{gap:18px;}
  body.accueil .foot-bottom{padding:12px 0;font-size:12px;}
}

/* ================================================================
   CONFIGURATION REPRISE DE LA VERSION 12
   Accueil en deux colonnes : le discours à gauche, ce que nous
   prenons en charge à droite. Tenue en une seule fenêtre.
   ================================================================ */
body.accueil .hero-body{display:flex;align-items:center;width:100%;}
body.accueil .hero-body > .wrap{width:100%;}
.hero-grid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(34px,4.4vw,66px);align-items:center;
}
.hero-texte{min-width:0;}
.hero-panel{
  background:var(--gris-doux);border:1px solid var(--line);border-radius:4px;
  padding:clamp(24px,3.2vh,36px) clamp(22px,2.4vw,32px);
}
.hero-panel h2{
  margin:0 0 4px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--ink);line-height:1.5;
}
.hero-panel li{
  display:flex;gap:12px;padding:clamp(9px,1.4vh,14px) 0;
  border-top:1px solid var(--line);
  font-size:clamp(13.5px,1.55vh,15px);line-height:1.5;color:var(--ink-soft);
}
.hero-panel li::before{content:"—";color:var(--ink-faint);flex:none;}
.hero-panel li:first-of-type{border-top:0;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
}

/* Le bandeau photo a laissé la place à la grille : plus d'ombre portée,
   les textes se lisent sur le fond de page. */
.hero h1,
.hero .lead,
.hero .kicker,
.accompagne{text-shadow:none;}
.hero .lead{color:var(--ink-soft);max-width:44ch;}
.accompagne{color:var(--ink-soft);}
body.accueil .hero-body{padding:clamp(28px,4vh,64px) 0 clamp(28px,4vh,64px);align-self:center;}

/* Titres : la graisse légère et l'espacement large de la carte de visite. */
h1,h2{font-weight:400;letter-spacing:-0.005em;}
h3{font-weight:600;letter-spacing:0;}
.hero h1{font-size:clamp(28px,min(4.1vw,5.6vh),48px);line-height:1.18;}

/* L'encadré reprend la face grise de la carte de visite : même gris,
   même encre, dans les deux thèmes. */
.hero-panel{background:var(--gris);border:0;color:#111214;}
.hero-panel h2{color:#111214;}
.hero-panel li{color:#2f3236;border-top-color:rgba(17,18,20,.16);}
.hero-panel li::before{color:rgba(17,18,20,.42);}

/* ================================================================
   Cartes de prestations : grille de trois colonnes, dépliage retiré
   (configuration reprise de la version 12).
   ================================================================ */
/* Prestations : même présentation que « Notre approche » — pas d'encadré,
   deux colonnes séparées par un filet. */
#prestations .list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;align-items:start;}
#prestations .carte-presta{
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:32px 0;
}
#prestations .carte-presta .num{
  display:block;font-size:12.5px;letter-spacing:.14em;color:var(--ink-faint);font-weight:600;
}
/* Prestations : cases dépliables au clic, sans signe « + ». */
#prestations .carte-presta details{margin:0;}
#prestations .carte-presta summary{display:block;cursor:pointer;list-style:none;}
#prestations .carte-presta summary::-webkit-details-marker{display:none;}
#prestations .carte-presta summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
#prestations .carte-presta h3{margin:12px 0 12px;font-size:19.5px;}
#prestations .carte-presta details[open] h3{margin-bottom:14px;}
#prestations .carte-presta p{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-soft);}

@media (max-width:640px){ #prestations .list{grid-template-columns:1fr;} }

/* ================================================================
   Parcours : fiche du fondateur et frise chronologique
   (configuration reprise de la version 12).
   ================================================================ */
.parcours-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,4.4vw,62px);align-items:start;}
.fiche{border:1px solid var(--line);border-radius:4px;padding:32px 28px;background:var(--panel);}
.fiche h3{font-size:21px;margin:0 0 4px;}
.fiche .role{margin:0 0 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent-txt);}
.fiche-txt{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-soft);}
.fiche-lbl{margin:26px 0 10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);}
.fiche-liste li{position:relative;padding-left:18px;margin-bottom:7px;font-size:15px;
  line-height:1.65;color:var(--ink-soft);}
.fiche-liste li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;
  background:var(--trait-2);}
.frise{list-style:none;margin:0;padding:0;counter-reset:none;}
.frise li{position:relative;border-left:1px solid var(--line);padding:0 0 32px 28px;}
.frise li:last-child{padding-bottom:0;}
.frise li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--ink);}
.frise .periode{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent-txt);}
.frise h3{margin:8px 0 4px;font-size:19px;}
.frise .lieu{margin:0;font-size:15.5px;color:var(--ink-soft);}
body.clair .fiche{box-shadow:0 1px 3px rgba(17,18,20,.05);}
@media (max-width:900px){ .parcours-grid{grid-template-columns:1fr;gap:34px;} }

/* Accueil sur petits écrans : l'encadré cède la place pour que la page
   tienne encore dans une seule fenêtre. Son contenu reste sur Prestations. */
@media (max-width:900px){
  body.accueil .hero-panel{display:none;}
  body.accueil .hero .lead{font-size:15.5px;line-height:1.65;margin-bottom:14px;}
  body.accueil .hero h1{font-size:clamp(25px,6.4vw,34px);line-height:1.16;margin-bottom:12px;}
  body.accueil .hero .kicker{margin-bottom:10px;font-size:10.5px;}
  body.accueil .accompagne{margin-bottom:16px;font-size:15px;}
  body.accueil .hero-body{padding:18px 0 22px;}
  body.accueil .site-footer{padding-bottom:10px;}
}
@media (max-width:640px){
  body.accueil .hero .lead{font-size:15px;}
  body.accueil .hero-cta{gap:18px;}
}

/* Six onglets : le menu déroulant prend le relais plus tôt, sinon la barre
   déborde entre 640 et 760 px. */
@media (max-width:800px){
  .burger{display:block;}
  .bar{gap:12px;}
  .actions{gap:8px;}
  .brand img,.brand svg:not(.vignette){width:140px;}
  .bar nav ul{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px var(--gutter) 16px;}
  .bar nav ul.open{display:flex;}
  .bar nav li{padding:13px 0;border-bottom:1px solid var(--line);}
}

/* Zones d'intervention : une phrase suffit. */
.zones-texte{margin:0;max-width:62ch;font-size:17px;line-height:1.85;color:var(--ink-soft);
  padding-top:26px;border-top:1px solid var(--line);}

/* Plan d'accès : rendu en noir et blanc dans les deux thèmes, affiché d'office. */
body.clair .carte iframe{filter:grayscale(1) contrast(1.04);}

/* Réalisations : message d'attente, le temps que les projets soient publiés. */
.bientot{border:1px solid var(--line);border-radius:4px;background:var(--panel);
  padding:clamp(34px,4.4vw,52px) clamp(26px,3.4vw,46px);max-width:70ch;}
.bientot p{margin:0 0 14px;color:var(--ink-soft);font-size:16.5px;line-height:1.8;}
.bientot .bientot-titre{font-size:20px;color:var(--ink);line-height:1.5;margin-bottom:16px;}
.bientot-cta{margin:26px 0 0;}
body.clair .bientot{box-shadow:0 1px 3px rgba(17,18,20,.05);}

/* ================================================================
   Référencement (22.09.2026) : titres de page h1, section indexable
   de l'accueil, en-tête de page Prestations / AMO, sélecteur de langue
   devenu un lien vers la version anglaise (dossier en/).
   ================================================================ */
/* Accueil : le premier écran reste identique (bandeau plein écran),
   la section de présentation se lit en faisant défiler. */
body.accueil .hero{min-height:calc(100svh - 77px);}
body.accueil main{display:block;}
.accueil-seo .texte{max-width:70ch;margin:0 0 22px;color:var(--ink-soft);font-size:16.5px;line-height:1.85;}
.accueil-seo .grid-liens{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;margin:12px 0 30px;}
.accueil-seo .grid-liens article{padding:26px 0;border-top:1px solid var(--line);}
.accueil-seo .grid-liens h3{font-size:19px;margin:0 0 10px;}
.accueil-seo .grid-liens h3 a{text-decoration:none;}
.accueil-seo .grid-liens h3 a:hover{color:var(--accent-txt);}
.accueil-seo .grid-liens p{margin:0;font-size:15.5px;color:var(--ink-soft);}
.accueil-seo .texte a{color:inherit;}
@media (max-width:900px){ .accueil-seo .grid-liens{grid-template-columns:1fr;} }
@media (max-width:900px){ body.accueil .hero-panel{display:none;} }

/* En-tête de page (Prestations, AMO) : titre h1 + chapô, sans le grand espacement des sections */
.page-tete{padding:64px 0 44px;}
.page-tete .sec-head{margin-bottom:0;}

/* Zones d'intervention : liste des cantons sous le paragraphe */
.zones-texte + .zones{margin-top:30px;}

/* Le bouton de langue est désormais un lien (même apparence) */
a.langue{text-decoration:none;}

/* Page AMO : appel à l'action sous les questions */
.amo-faq .bientot-cta{margin-top:34px;}

/* =========================================================================
   Navigation latérale (écrans larges)
   -------------------------------------------------------------------------
   Sur écran large, la barre de navigation devient une colonne fixe à gauche :
   logo animé lettre par lettre, onglets les uns au-dessus des autres, puis
   thème et langue en bas. Sous 1000 px, la barre reste en haut comme avant.
   Pour revenir à la barre horizontale : supprimer ce bloc jusqu'à la fin du
   fichier ; le logo reste images/logo-bramah.webp.
   ========================================================================= */

/* Sous 1000 px (téléphone, tablette), rien ne change : la barre reste en haut. */
@media (min-width:1000px){

  /* La colonne occupe la gauche de l'écran ; le contenu se décale d'autant. */
  body{padding-left:264px;}

  .site-header{
    position:fixed;top:0;left:0;bottom:0;width:264px;
    border-bottom:0;border-right:1px solid var(--line);
    display:flex;
  }

  .site-header .bar{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    height:100%;width:100%;max-width:none;gap:40px;padding:40px 30px;
  }

  /* Logotype : plus grand, l'animation lettre par lettre est ainsi visible. */
  .brand img{width:200px;}

  /* Les onglets, les uns au-dessus des autres. */
  .bar nav{width:100%;}
  .bar nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%;}
  .bar nav li{width:100%;}
  .bar nav a{
    display:block;padding:11px 0;font-size:15px;letter-spacing:.01em;
    border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  }
  .bar nav a:hover{border-bottom-color:var(--line);}
  .bar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);}

  /* Thème et langue : en bas de la colonne. */
  .actions{margin-top:auto;}
  .burger{display:none;}

  /* Les onglets apparaissent un à un, après le logo. */
  .bar nav li{opacity:0;animation:essai-onglet .5s cubic-bezier(.22,.7,.3,1) both;}
  .bar nav li:nth-child(1){animation-delay:1.05s;}
  .bar nav li:nth-child(2){animation-delay:1.15s;}
  .bar nav li:nth-child(3){animation-delay:1.25s;}
  .bar nav li:nth-child(4){animation-delay:1.35s;}
  .bar nav li:nth-child(5){animation-delay:1.45s;}
  .bar nav li:nth-child(6){animation-delay:1.55s;}
  .actions{opacity:0;animation:essai-onglet .5s cubic-bezier(.22,.7,.3,1) 1.7s both;}
  @keyframes essai-onglet{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    .bar nav li,.actions{animation:none;opacity:1;transform:none;}
  }
}

/* Champ piège à robots du formulaire : invisible, jamais rempli par un humain. */
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* La ligne sous le bouton ne sert qu'aux messages de confirmation ou d'erreur :
   tant qu'elle est vide, elle ne prend aucune place. */
.form-note:empty{display:none;}

/* =========================================================================
   Fond de la page d'accueil : mur de béton derrière le contenu.
   La colonne de navigation garde son fond plein, l'image ne passe pas
   derrière le menu. Un voile assure la lisibilité du texte.
   Pour revenir à un fond uni : supprimer ce bloc.
   ========================================================================= */
body.accueil .site-header{background:var(--bg);backdrop-filter:none;}
body.accueil #contenu{
  background:
    linear-gradient(rgba(19,20,22,.52), rgba(19,20,22,.74)),
    url("../images/fond-accueil-beton.jpg") center / cover no-repeat fixed;
}
body.accueil #contenu section,
body.accueil #contenu .alt{background:transparent;}
@media (max-width:900px){
  body.accueil #contenu{background-attachment:scroll;}
}
body.accueil .hero-body{padding:96px 0 104px;}

body.clair.accueil .site-header{background:var(--bg);}
body.clair.accueil #contenu{
  background:
    linear-gradient(rgba(244,244,246,.62), rgba(244,244,246,.80)),
    url("../images/fond-accueil-beton.jpg") center / cover no-repeat fixed;
}

/* =========================================================================
   Page À propos : photo dans la colonne de gauche.
   L'accroche et la photo forment un seul bloc, fixé pendant le défilement
   du texte. Traitement sobre : noir et blanc, sans cadre ni ombre.
   ========================================================================= */
.apropos-photo{margin:0;}
.apropos-photo img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03);}
@media (min-width:900px){
  .about.sans-photo .texte-libre > .apropos-colonne{
    grid-column:1;grid-row:1 / span 12;position:sticky;top:120px;align-self:start;
  }
  .about.sans-photo .texte-libre > .apropos-colonne > p{position:static;max-width:none;}
  .apropos-colonne .apropos-photo{margin:28px 0 0;}
}
@media (max-width:899px){
  .apropos-photo{max-width:420px;margin:8px 0 28px;}
}