/* Ivanov Rénovation. Modèle : « Éditorial Sombre » du Landing Deck, déclinaison or, refait en site multi-pages. */
:root{--fond:#13110d;--fond-2:#1c1813;--fond-3:#241f18;--encre:#f2ece0;--doux:#c9bfb0;--gris:#a89e8c;--trait:#312b22;--trait-2:#4a4438;
--or:#d4a24f;--or-2:#e0c87f;--or-encre:#1a140a}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--encre);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
main{background:var(--fond)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;line-height:1.12;letter-spacing:-.01em}
h1{font-weight:800;font-size:clamp(34px,5.4vw,60px);margin-bottom:22px}
h2{font-weight:800;font-size:clamp(26px,3.4vw,40px);margin-bottom:18px}
h3{font-weight:700;font-size:20px}
p+p{margin-top:14px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.etroit{max-width:820px}
/* barre du haut : fixe, 100 % opaque, zone au-dessus peinte */
.barre{position:fixed;inset:0 0 auto;z-index:50;background:var(--fond);border-bottom:1px solid var(--trait)}
.barre::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:300px;background:var(--fond)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.logo img{height:62px;width:auto}
.menu{display:flex;gap:24px;font-size:15px;color:var(--doux)}
.menu a{text-decoration:none;padding:6px 0}
.menu a:hover,.menu a[aria-current]{color:var(--or-2)}
.navcta{display:flex;align-items:center;gap:16px}
.tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;white-space:nowrap}
.tel svg{color:var(--or)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px 'Hanken Grotesk',system-ui,sans-serif;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;min-height:48px;transition:background .2s,border-color .2s}
.btn-or{background:var(--or);color:var(--or-encre)}.btn-or:hover{background:var(--or-2)}
.btn-ligne{border:1px solid var(--trait-2);color:var(--encre);background:transparent}.btn-ligne:hover{border-color:var(--encre)}
.plein{width:100%}
.hamb{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:10px}
.hamb span{display:block;height:2px;background:var(--encre);border-radius:2px}
/* accueil */
.hero{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden;padding-top:78px}
.hero-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(19,17,13,.94) 32%,rgba(19,17,13,.55) 68%,rgba(19,17,13,.75))}
.hero-in{position:relative;z-index:1;padding:80px 40px;max-width:1200px}
.hero-in h1{max-width:760px}
.lead{font-size:19px;color:var(--doux);max-width:620px}
.zone{margin-top:14px;font-size:15px;font-weight:600;color:var(--or-2);max-width:620px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.bande{background:var(--fond-2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.bande .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding-top:22px;padding-bottom:22px}
.bande a{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;text-decoration:none;color:var(--or-2);text-align:center;padding:8px 4px}
.bande a:hover{color:var(--encre)}
.sec{padding:84px 0}
.sec.alt{background:var(--fond-2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.sec.haut{padding-top:150px}
.tete{max-width:680px;margin-bottom:40px}
.tete p{color:var(--gris)}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.carte{background:var(--fond-2);border:1px solid var(--trait);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .25s,border-color .25s}
.carte:hover{transform:translateY(-4px);border-color:var(--trait-2)}
.carte img{width:100%;height:220px;object-fit:cover}
.carte .b{padding:24px}
.carte h3{margin-bottom:10px}
.carte p{font-size:15.5px;color:var(--gris);margin-bottom:14px}
.suite{color:var(--or);font-weight:700;font-size:15px}
.deux{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
figure{margin:0}
figure img{width:100%;border-radius:14px;object-fit:cover;aspect-ratio:3/4}
figcaption{font-size:14px;color:var(--gris);margin-top:10px}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.galerie.trois{grid-template-columns:repeat(3,1fr)}
.etapes{counter-reset:e;list-style:none;padding:0;margin:8px 0 40px}
.etapes li{counter-increment:e;position:relative;padding:16px 0 16px 62px;border-bottom:1px solid var(--trait)}
.etapes li::before{content:counter(e);position:absolute;left:0;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--or);color:var(--or);font:800 18px 'Archivo',sans-serif;display:flex;align-items:center;justify-content:center}
.coches{list-style:none;padding:0;margin:8px 0 20px}
.coches li{position:relative;padding:8px 0 8px 30px}
.coches li::before{content:"";position:absolute;left:4px;top:17px;width:10px;height:10px;border-radius:2px;background:var(--or)}
.faq details{border-bottom:1px solid var(--trait);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font:700 24px 'Archivo',sans-serif;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq h3{font-size:18px}
.faq p{color:var(--doux);margin-top:10px}
.appel{text-align:center;padding:84px 40px;background:radial-gradient(120% 140% at 50% 0%,#2a2418,var(--fond));border-top:1px solid var(--trait)}
.appel p{color:var(--gris);margin-bottom:28px}
.puces{display:flex;flex-wrap:wrap;gap:12px}
.puce{border:1px solid var(--trait-2);border-radius:999px;padding:10px 18px;text-decoration:none;color:var(--doux);font-size:15px}
.puce:hover{border-color:var(--or);color:var(--encre)}
/* pages métier */
.hero-page{padding:140px 0 70px}
.hero-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.hero-photo{width:100%;height:auto;border-radius:18px;aspect-ratio:4/5;object-fit:cover}
.fil{font-size:14px;color:var(--gris);margin-bottom:18px}
.fil a{color:var(--or-2)}
.definition{border-left:3px solid var(--or);padding-left:26px}
.definition p{color:var(--doux);font-size:18px}
.logo-apropos{max-width:373px;width:100%;margin:0 auto}
.texte h2{font-size:24px;margin-top:30px}
.merci{text-align:center;min-height:60vh}
/* pied */
.pied{background:#0e0c09;border-top:1px solid var(--trait);padding:64px 0 24px;font-size:15.5px}
.grille-pied{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.pied h2{font-size:17px;margin-bottom:14px;color:var(--or-2)}
.pied ul{list-style:none;padding:0}
.pied li{padding:5px 0}
.pied a{text-decoration:none;color:var(--doux)}.pied a:hover{color:var(--encre)}
.pied .btn{margin-top:18px;color:var(--or-encre)}
.logo-pied{width:150px;height:auto;margin-bottom:14px}
.nap a{color:var(--or-2)!important;font-weight:700}
.copy{color:var(--gris);font-size:13.5px;margin-top:40px}
.appel-mobile{display:none}
/* fenêtre du formulaire */
body.bloque{overflow:hidden}
.voile{position:fixed;inset:0;z-index:100;background:rgba(8,7,5,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.voile[hidden]{display:none}
.fenetre{position:relative;background:var(--fond-2);border:1px solid var(--trait-2);border-radius:18px;padding:30px 28px 24px;width:100%;max-width:480px;max-height:92vh;overflow:auto}
.fenetre h2{font-size:26px;margin-bottom:6px;padding-right:40px}
.fenetre .s{color:var(--gris);font-size:15px;margin-bottom:18px}
.fermer{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;color:var(--encre);font-size:30px;line-height:1;cursor:pointer;border-radius:50%}
.fermer:hover{background:var(--fond-3)}
.lead-form label{display:block;font-size:14px;font-weight:700;color:var(--doux);margin:0 0 6px}
.lead-form label span{font-weight:400;color:var(--gris)}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;background:var(--fond);border:1px solid var(--trait-2);border-radius:10px;padding:12px 13px;color:var(--encre);font:16px 'Hanken Grotesk',system-ui,sans-serif;margin-bottom:14px}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.lead-form .mention{font-size:13px;color:var(--gris);margin-top:10px;text-align:center}
@media(max-width:1100px){.menu{gap:16px;font-size:14px}.tel span{display:none}}
@media(max-width:960px){
  .wrap{padding:0 16px}
  .menu{display:none;position:fixed;top:78px;left:0;right:0;background:var(--fond);flex-direction:column;gap:0;padding:8px 16px 18px;border-bottom:1px solid var(--trait);box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .menu.ouvert{display:flex}
  .menu a{padding:13px 2px;font-size:17px;border-bottom:1px solid var(--trait)}
  .hamb{display:inline-flex}
  .navcta .btn{display:none}
  .nav{height:70px}.logo img{height:54px}
  .menu{top:70px}
  .hero{min-height:0;padding-top:70px}.hero-in{padding:56px 16px 64px}
  .bande .wrap{grid-template-columns:repeat(3,1fr)}
  .cartes,.galerie.trois{grid-template-columns:1fr}
  .deux,.hero-grille,.grille-pied{grid-template-columns:1fr;gap:34px}
  .hero-page{padding:110px 0 50px}
  .hero-photo{aspect-ratio:4/3}
  .sec{padding:60px 0}.sec.haut{padding-top:110px}
  .appel{padding:64px 16px}
  body{padding-bottom:64px}
  .appel-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:58px;align-items:center;justify-content:center;background:var(--or);color:var(--or-encre);font-weight:800;text-decoration:none;font-size:17px}
}
@media(max-width:520px){.galerie{grid-template-columns:1fr}.bande .wrap{grid-template-columns:repeat(2,1fr)}.actions .btn{width:100%}}
/* Carrousel de la maison (inocom-os-2/chantiers/carrousel-chantiers), collé tel quel ci-dessous. Il ne porte aucune
   couleur en dur : il lit ces variables, ici branchées sur le noir et or du site. */
:root{--card-bg:var(--fond-2);--border:1px solid var(--trait);--radius-lg:14px;--shadow:none;--shadow-lg:0 10px 28px rgba(0,0,0,.5);
--muted:var(--doux);--accent:var(--or);--ink:var(--encre);--bg-alt:var(--fond-3);--font-display:'Archivo',system-ui,sans-serif;--weight-display:800}
/* dans une colonne de grille, le carrousel doit pouvoir être plus étroit que sa piste */
.deux>.chantiers-carrousel{min-width:0}
/* pages métier : deux à quatre photos dans une colonne ; des cartes plus larges que celles du modèle, pour que la
   suivante dépasse toujours et qu'il y ait quelque chose à faire défiler, même à 768 px (réglage « largeur des cartes ») */
.deux>.chantiers-carrousel .chantiers-vue{flex-basis:min(86%,480px)}
/* --- carrousel chantiers (modele Pierre Gautier, pose le 18/09/2026) --- */
.chantiers-carrousel { position: relative; }
.chantiers-piste {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 4px 16px; margin: 0 -4px; list-style: none;
}
.chantiers-vue {
  flex: 0 0 clamp(228px, 74vw, 330px); scroll-snap-align: center; margin: 0;
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 22px);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.chantiers-vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; background: var(--bg-alt);
}
.chantiers-vue figcaption {
  padding: 15px 17px 18px; font-size: .93rem; line-height: 1.5; color: var(--muted);
}
.chantiers-fleche {
  display: none; position: absolute; top: calc(50% - 40px); transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px; border: var(--border); cursor: pointer;
  background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: 1.5rem; line-height: 1; align-items: center; justify-content: center; z-index: 3;
}
.chantiers-fleche:disabled { opacity: .35; cursor: default; }
.chantiers-fleche.prev { left: -10px; }
.chantiers-fleche.next { right: -10px; }
@media (min-width: 900px) { .chantiers-fleche { display: flex; } }
.chantiers-points { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.chantiers-points button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--muted); opacity: .3; transition: opacity .2s, width .2s;
}
.chantiers-points button[aria-current="true"] { opacity: 1; width: 22px; background: var(--accent); }
.chantiers-pont {
  max-width: 640px; margin: 30px auto 0; text-align: center;
  font-family: var(--font-display); font-weight: var(--weight-display, 700);
  font-size: clamp(1.08rem, 2.2vw, 1.3rem); line-height: 1.4; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .chantiers-piste { scroll-behavior: auto; } }

/* --- ouverture d'une photo en grand (MDO Concept, 18/09/2026) --- */
.chantiers-vue .chantiers-zoom {
  /* le lien ne doit rien ajouter au dessin de la vignette : ni soulignement, ni couleur */
  display: block; position: relative; cursor: zoom-in;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.chantiers-vue .chantiers-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* La loupe n'est qu'un indice : aria-hidden cote balisage, et pointer-events:none pour
   qu'elle n'avale jamais le clic. */
.chantiers-zoom-loupe {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(17, 17, 17, .58); color: #fff; pointer-events: none;
  opacity: .9; transition: opacity .2s, transform .2s;
}
.chantiers-zoom:hover .chantiers-zoom-loupe { opacity: 1; transform: scale(1.06); }

dialog.photo-plein {
  position: fixed; inset: 0;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  /* Le fond sombre est porte par le dialog ET par son ::backdrop, volontairement a la meme
     valeur : un dialog transparent laisserait la photo sur le fond clair de la page si le
     backdrop n'est pas peint. */
  background: rgba(12, 12, 14, .95); color: #fff;
}
@supports (height: 100dvh) {
  /* sur telephone, 100vh vaut l'ecran SANS la barre d'URL : la photo deborderait du bas */
  dialog.photo-plein { height: 100dvh; max-height: 100dvh; }
}
dialog.photo-plein::backdrop { background: rgba(12, 12, 14, .95); }
dialog.photo-plein:not([open]) { display: none; }
dialog.photo-plein[open] { display: flex; }

.photo-plein-fig {
  display: grid; grid-template-rows: 1fr auto; gap: 12px;
  width: 100%; height: 100%; margin: 0; box-sizing: border-box;
  padding: clamp(52px, 7vw, 66px) clamp(10px, 2.2vw, 24px) clamp(14px, 2.4vw, 24px);
}
.photo-plein-fig img {
  /* min-height:0 est OBLIGATOIRE : sans lui, une rangee `1fr` ne descend jamais sous la
     hauteur intrinseque de l'image, et la photo deborde par le bas sur telephone. */
  min-height: 0; min-width: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: opacity .18s ease;
}
dialog.photo-plein.chargement img { opacity: .4; }
.photo-plein-bas { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-plein-bas figcaption {
  max-width: 62ch; margin: 0; text-align: center;
  font-size: clamp(.9rem, 2.3vw, 1rem); line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.photo-plein-rang {
  margin: 0; font-size: .8rem; letter-spacing: .05em; color: rgba(255, 255, 255, .6);
}
.photo-plein-btn {
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .15); transition: background .2s, opacity .2s;
}
.photo-plein-btn:hover { background: rgba(255, 255, 255, .28); }
.photo-plein-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.photo-plein-btn:disabled { opacity: .25; cursor: default; }
.photo-plein-fermer {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
}
/* Au-dessus de 620 px, les deux fleches sont posees SUR la photo, a gauche et a droite ;
   `display:contents` sur leur conteneur le fait disparaitre de la mise en page sans toucher
   aux boutons. Sous 620 px elles repassent dans le flux, sous la photo. */
.photo-plein-nav { display: contents; }
.photo-plein-prec, .photo-plein-suiv {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; font-size: 1.8rem; line-height: 1;
}
.photo-plein-prec { left: 10px; }
.photo-plein-suiv { right: 10px; }
@media (min-width: 900px) {
  .photo-plein-prec, .photo-plein-suiv { width: 54px; height: 54px; }
  .photo-plein-prec { left: 22px; }
  .photo-plein-suiv { right: 22px; }
}
@media (max-width: 619px) {
  /* Sur telephone, une fleche posee sur la photo couvre le sujet et tombe sous le pouce au
     moment du balayage. Le balayage reste le geste principal, les fleches passent dessous. */
  .photo-plein-nav { display: flex; justify-content: center; gap: 20px; margin-top: 4px; }
  .photo-plein-prec, .photo-plein-suiv { position: static; transform: none; width: 48px; height: 48px; }
}
/* Le corps ne defile plus quand la fenetre est ouverte. La compensation de largeur evite que
   toute la page saute de cote au moment ou la barre de defilement disparait. */
html.photo-plein-ouverte { overflow: hidden; padding-right: var(--photo-plein-barre, 0px); }
@media (prefers-reduced-motion: reduce) {
  .photo-plein-fig img, .photo-plein-btn, .chantiers-zoom-loupe { transition: none; }
}