/* =================================================================
   MN Entreprise v2 : VARIANTE CLAIRE (body.clair)
   Chargée après styles.css, uniquement dans /clair/.
   Même structure, mêmes couleurs de charte : fonds papier / vert d'eau pâle,
   texte encre, accents vert d'eau foncé. Seul le pied de page reste pétrole.
   ================================================================= */
.clair {
  --eau-texte: #2e6b67;   /* vert d'eau assombri pour le texte sur fond clair */
}

/* ---------- Sections autrefois sombres : on inverse les variables ---------- */
.clair .hero, .clair .pagehead, .clair .manifeste, .clair .appel, .clair .band-sombre {
  --sur-sombre: var(--encre);
  --sur-sombre-doux: var(--encre-douce);
  --filet-sombre: rgba(17, 43, 64, .16);
  color: var(--encre);
}
.clair .hero, .clair .pagehead, .clair .manifeste, .clair .appel { background: var(--papier); }
.clair .band-sombre { background: var(--eau-pale); }
.clair .hero h1, .clair .pagehead h1, .clair .appel h2, .clair .band-sombre h2, .clair .manifeste-titre { color: var(--charbon); }
.clair .hero .libelle, .clair .pagehead .libelle, .clair .band-sombre .libelle,
.clair .appel .libelle, .clair .manifeste .libelle { color: var(--eau-texte); }
.clair .hero .libelle::before, .clair .pagehead .libelle::before, .clair .band-sombre .libelle::before,
.clair .appel .libelle::before, .clair .manifeste .libelle::before { background: var(--eau-texte); }
.clair .hero-titre em { color: var(--eau-texte); }

/* Photo plein cadre : voile clair à gauche (texte), photo visible à droite */
.clair .fond-photo { background: var(--papier); }
.clair .fond-photo img { mix-blend-mode: normal; opacity: .9; filter: grayscale(1) contrast(1.02) brightness(1.06); }
.clair .fond-photo::after {
  background: linear-gradient(100deg, rgba(240,242,242,.98) 0%, rgba(240,242,242,.9) 40%, rgba(240,242,242,.35) 72%, rgba(240,242,242,.15) 100%),
              linear-gradient(to top, rgba(240,242,242,.95) 0%, rgba(240,242,242,0) 40%);
}
@media (max-width: 700px) {
  .clair .fond-photo::after { background: linear-gradient(to top, rgba(240,242,242,.97) 0%, rgba(240,242,242,.9) 55%, rgba(240,242,242,.78) 100%); }
}
.clair .grain::after { opacity: .05; mix-blend-mode: multiply; }

/* ---------- Bandeau du haut : vert d'eau ---------- */
.clair .bandeau { background: var(--eau); color: var(--noir); }
.clair .bandeau .point { background: var(--charbon); }
.clair .bandeau-zone, .clair .langue .off { color: #22403f; }
.clair .langue { border-color: rgba(10,24,36,.3); }
.clair .langue .on { background: var(--charbon); color: var(--blanc); }
.clair .bandeau-tel:hover { color: var(--charbon); }

/* ---------- Navigation ---------- */
.clair .nav-liens a { color: var(--encre-douce); }
.clair .nav-liens a:hover, .clair .nav-liens a[aria-current="page"] { color: var(--eau-texte); }
.clair .nav-cta { background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }
.clair .nav-cta:hover { background: var(--eau); border-color: var(--eau); color: var(--noir); }
.clair .nav-bouton { border-color: rgba(17,43,64,.4); color: var(--charbon); }
.clair .nav-panneau.ouvert { background: var(--blanc); border-color: var(--filet); box-shadow: 0 18px 40px rgba(17,43,64,.14); }
.clair .nav-panneau ul a { color: var(--encre); border-bottom-color: var(--filet); }
.clair .nav-panneau ul a:hover { background: var(--eau-pale); color: var(--charbon); }

/* ---------- Boutons et badges sur fond clair ---------- */
.clair .btn-contour-clair { border-color: rgba(17,43,64,.45); color: var(--charbon); }
.clair .btn-contour-clair:hover { background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }
.clair .hero .btn-eau, .clair .pagehead .btn-eau, .clair .manifeste .btn-eau, .clair .appel .btn-eau, .clair .band-sombre .btn-eau {
  background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }
.clair .hero .btn-eau:hover, .clair .pagehead .btn-eau:hover, .clair .manifeste .btn-eau:hover,
.clair .appel .btn-eau:hover, .clair .band-sombre .btn-eau:hover { background: var(--eau); border-color: var(--eau); color: var(--noir); }
.clair .dispo { background: var(--blanc); border-color: var(--filet); color: var(--encre); backdrop-filter: none; }

/* ---------- Hero / en-têtes ---------- */
.clair .chiffre b { color: var(--charbon); }
.clair .pagehead-faits dt { color: var(--eau-texte); }
.clair .sceau text { fill: var(--eau-texte); }

/* ---------- Ruban ---------- */
.clair .ruban { background: var(--eau-pale); }
.clair .ruban-piste span { -webkit-text-stroke: 1px rgba(17,43,64,.35); }
.clair .ruban-piste span:nth-child(3n+2) { color: var(--charbon); }
.clair .ruban-piste span::after { background: var(--eau-texte); }

/* ---------- Cartes : photo en haut, texte sur fond blanc ---------- */
.clair .carte { aspect-ratio: auto; background: var(--blanc); color: var(--encre); display: flex; flex-direction: column;
  border: 1px solid var(--filet-doux); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.clair .carte:hover { box-shadow: 0 22px 50px rgba(17,43,64,.12); transform: translateY(-3px); }
.clair .carte::after { content: none; }
.clair .carte img { position: relative; inset: auto; height: auto; aspect-ratio: 4/3; opacity: 1; filter: grayscale(1) contrast(1.04); }
.clair .carte:hover img { filter: grayscale(.15); }
.clair .carte-num { -webkit-text-stroke: 1px rgba(255,255,255,.85); text-shadow: 0 0 1px rgba(0,0,0,.1); }
.clair .carte-corps { position: relative; inset: auto; flex: 1; padding: 1.4rem 4.6rem 1.6rem 1.4rem; }
.clair .carte-cat { color: var(--eau-texte); }
.clair .carte h3 { color: var(--charbon); }
.clair .carte-def { color: var(--encre-douce); }
.clair .carte-fleche { border-color: rgba(17,43,64,.25); color: var(--charbon); }
.clair .carte:hover .carte-fleche { background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }
.clair .band-papier .carte { border-color: transparent; }

/* ---------- Étapes et listes (sections ex-sombres) ---------- */
.clair .etape { border-top-color: rgba(17,43,64,.18); }
.clair .etape .etape-num { -webkit-text-stroke: 1px var(--eau-texte); }
.clair .etape h3, .clair .band-sombre .livre strong { color: var(--charbon); }
.clair .band-sombre .livre .num { color: var(--eau-texte); }
.clair .band-sombre .lien { color: var(--charbon); border-color: rgba(17,43,64,.3); }

/* ---------- Manifeste ---------- */
.clair .manifeste-faits { border-top-color: rgba(17,43,64,.18); }
.clair .manifeste-faits b { color: var(--eau-texte); }

/* ---------- Appel final ---------- */
.clair .appel-tel { border-color: rgba(17,43,64,.3); color: var(--charbon); background: rgba(255,255,255,.6); }
.clair .appel-tel span { color: var(--eau-texte); }
.clair .appel-tel:hover { background: var(--charbon); color: var(--blanc); }
.clair .appel-tel:hover span { color: var(--eau); }

/* ---------- Page de chargement claire ---------- */
.clair .pl { background: var(--papier); color: var(--encre); }
.clair .pl::before { background: radial-gradient(60% 50% at 50% 45%, rgba(177,222,219,.35), transparent 70%); }
.clair .pl-sous { color: var(--eau-texte); }
.clair .pl-urgence { color: var(--encre-douce); }
.clair .pl-piste { background: rgba(17,43,64,.1); }
.clair .pl-barre { background: var(--charbon); }

/* Le pied de page reste pétrole : il ancre la page. */

/* Numéros des cartes lisibles même sur une photo claire */
.clair .carte-num { color: var(--blanc); -webkit-text-stroke: 0; text-shadow: 0 2px 14px rgba(10,24,36,.55), 0 0 2px rgba(10,24,36,.35); }
.clair .ruban-piste span { -webkit-text-stroke: 1px rgba(17,43,64,.55); }
.clair .langue a.off:hover { color: var(--charbon); text-decoration: underline; }
.clair .panneau-langue { color: var(--eau-texte); }

/* En-tête V3 et menu mobile, version claire */
.clair .entete { --nav-txt: var(--charbon); --nav-filet: rgba(17,43,64,.28); --mm-bg: var(--papier); }
.clair .entete-tel small, .clair .mm-titre { color: var(--eau-texte); }
.clair .nav-lien:hover, .clair .nav-lien[aria-current] { text-decoration-color: var(--eau-texte); }
.clair .mm-services a[aria-current], .clair .mm-pages a[aria-current] { color: var(--eau-texte); }
.clair .entete .langue .on, .clair .menu-mobile .langue .on { background: var(--charbon); color: var(--blanc); }
.clair .entete .langue .off, .clair .menu-mobile .langue .off { color: var(--charbon); }

/* Haut de page clair : boutons jumeaux */
.clair .cta-appel { background: rgba(255,255,255,.75); }
.clair .garanties { color: var(--encre); }
.clair .garanties svg { color: var(--eau-texte); }
/* Mobile : la photo se voit en haut, puis se fond vers le texte */
@media (max-width: 600px) {
  .clair .hero .fond-photo::after, .clair .pagehead .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,.1) 0%, rgba(240,242,242,.25) 24%, rgba(240,242,242,.9) 46%, var(--papier) 60%); }
  .clair .hero .fond-photo img, .clair .pagehead .fond-photo img { opacity: 1; filter: grayscale(1) contrast(1.05); }
  .clair .hero-inner { padding-top: calc(4.6rem + 30vh); }
  .clair .pagehead { padding-top: calc(4.6rem + 22vh); }
}
@media (max-width: 600px) {
  .clair .hero .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,.05) 0, rgba(240,242,242,.2) calc(4.6rem + 12vh),
                rgba(240,242,242,.94) calc(4.6rem + 26vh), var(--papier) calc(4.6rem + 30vh)); }
  .clair .pagehead .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,.05) 0, rgba(240,242,242,.2) calc(4.6rem + 8vh),
                rgba(240,242,242,.94) calc(4.6rem + 18vh), var(--papier) calc(4.6rem + 22vh)); }
  .clair .hero .fond-photo img, .clair .pagehead .fond-photo img { filter: grayscale(1) contrast(1.15) brightness(.92); }
}
/* Mobile : la photo occupe seulement la bande du haut, cadrée sur le sujet */
@media (max-width: 600px) {
  .clair .hero .fond-photo { bottom: auto; height: calc(4.6rem + 32vh); }
  .clair .pagehead .fond-photo { bottom: auto; height: calc(4.6rem + 24vh); }
  .clair .hero .fond-photo img { object-position: 64% 45%; }
  .clair .pagehead .fond-photo img { object-position: center 45%; }
  .clair .hero .fond-photo::after, .clair .pagehead .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,.35) 0, rgba(240,242,242,0) 30%, rgba(240,242,242,0) 55%, var(--papier) 100%); }
}
/* Mobile / tablette : en-tête sur fond clair, toujours lisible quelle que soit la photo */
@media (max-width: 1179px) {
  .clair .entete { background: transparent; border-bottom: 1px solid var(--filet-doux); padding-block: .8rem; }
  /* flou sur une couche à part : un backdrop-filter sur .entete enfermerait le menu plein écran (position fixed) dans l'en-tête */
  .clair .entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(240,242,242,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  html.menu-ouvert .clair .entete, .clair.menu-ouvert .entete { background: var(--papier); }
}
@media (max-width: 600px) {
  .clair .hero .fond-photo, .clair .pagehead .fond-photo { top: 4.5rem; }
  .clair .hero .fond-photo::after, .clair .pagehead .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,0) 0, rgba(240,242,242,0) 55%, var(--papier) 100%); }
}
/* Mobile : bande photo sous l'en-tête, puis le texte commence sur fond net */
@media (max-width: 600px) {
  .clair .hero { --bande: 30vh; }
  .clair .pagehead { --bande: 22vh; }
  .clair .hero .fond-photo, .clair .pagehead .fond-photo { top: 4.4rem; height: var(--bande); }
  .clair .hero-inner { padding-top: calc(4.4rem + var(--bande) + 1.6rem); }
  .clair .pagehead { padding-top: calc(4.4rem + var(--bande) + 1.6rem); }
  .clair .hero .fond-photo::after, .clair .pagehead .fond-photo::after {
    background: linear-gradient(to bottom, rgba(240,242,242,0) 0, rgba(240,242,242,0) 62%, var(--papier) 100%); }
}
/* Tablette : voile plus couvrant derrière le texte (photos sombres comme l'incendie) */
@media (min-width: 601px) and (max-width: 1179px) {
  .clair .fond-photo::after {
    background: linear-gradient(100deg, rgba(240,242,242,.97) 0%, rgba(240,242,242,.93) 55%, rgba(240,242,242,.55) 85%, rgba(240,242,242,.3) 100%),
                linear-gradient(to top, rgba(240,242,242,.95) 0%, rgba(240,242,242,0) 40%); }
}