/* Maquettes du 30/10/2026, inspirées de la lecture d'un concurrent.
   Chargé APRÈS /css/site.css. Trois versions, choisies par une classe sur <html> :
   v-sombre (Encre actuel, aéré), v-clair, v-alterne. Aucun texte modifié. */

/* ── Palettes ─────────────────────────────────────────────────────────── */
html.v-clair, html.v-alterne {
  --fond:   #F6F7F4;
  --fond-2: #E8EDE9;   /* palier clair : bande de chiffres, sections mises en avant */
  --carte:  #FFFFFF;
  --trait:  #D2DAD4;
  --texte:  #0E1714;
  --gris:   #46534D;   /* 7,5:1 sur le fond */
  --ocre:   #8C520A;   /* liens et chiffres en texte : 5,9:1 */
  --nuit:   #F6F7F4;   /* en clair, la « nuit » du haut de page devient le fond */
  color-scheme: light;
}
html.v-sombre { --carte: #22312B; }

/* Version alternée : le haut, les chiffres, les sections mises en avant et le
   pied restent en Encre sombre. On y redéclare les variables sombres : tout ce
   qui est dedans suit, sans toucher aux règles du site. */
html.v-alterne .barre, html.v-alterne .hero, html.v-alterne .sec--palier,
html.v-alterne .sec--sombre, html.v-alterne .pied {
  --nuit: #0E1714; --fond: #1A2521; --fond-2: #22312B; --carte: #22312B;
  --trait: #34473F; --texte: #EDE8DD; --gris: #B9C4BE; --ocre: #E9A54B;
  color: var(--texte); color-scheme: dark;
}
html.v-alterne .sec--palier, html.v-alterne .sec--sombre {
  background: #0E1714; box-shadow: 0 0 0 100vmax #0E1714;
  /* L'ombre étend la couleur sur toute la largeur. Sans ce découpage, elle s'étend aussi
     de 100vmax en haut et en bas, par-dessus les sections voisines (constaté le 30/10). */
  clip-path: inset(0 -100vmax);
}
/* Page Création : la section « écrit à la main » passe en sombre pour rythmer */
html.v-alterne .sec:has(#fait-main) { --nuit: #0E1714; --fond: #1A2521; --fond-2: #22312B; --carte: #22312B;
  --trait: #34473F; --texte: #EDE8DD; --gris: #B9C4BE; --ocre: #E9A54B; color: var(--texte);
  background: #0E1714; box-shadow: 0 0 0 100vmax #0E1714; clip-path: inset(0 -100vmax); }

/* En clair, le haut de page se détache du reste par un filet, pas par la couleur */
html.v-clair .barre { border-bottom: 1px solid var(--trait); box-shadow: 0 0 0 100vmax var(--nuit); }
html.v-clair .hero > .hero__arche { color: #DCE3DE; }
html.v-clair .pied { background: var(--fond-2); box-shadow: 0 0 0 100vmax var(--fond-2); }
html.v-clair .vitrine__tel { background: #0E1714; border-color: #0E1714; }
html.v-clair .btn--ligne:hover { background: var(--carte); }

/* ── Aération, commune aux trois versions ─────────────────────────────── */
/* Mesuré le 30/10 : même nombre de mots que le concurrent, sur une page deux
   fois moins haute. On rend de la place au texte, on n'en retire pas. */
.sec { padding-top: 128px; padding-bottom: 128px; }
.sec__corps p { line-height: 1.7; margin-bottom: 24px; }
.chapo { margin-bottom: 30px; }
.hero:not(.hero--page) .hero__titre { font-size: clamp(2.4rem, 4.8vw, 4.3rem); }
.hero--page .hero__titre { font-size: clamp(2.1rem, 3.8vw, 3.3rem); }

/* Les listes deviennent des blocs courts : un titre, deux lignes. */
.liste {
  border-top: none; margin-top: 36px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px;
}
.liste li {
  display: block; padding: 24px 24px 26px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 6px;
  line-height: 1.6;
}
.liste li > span:first-child {
  display: block; font-family: var(--t); font-size: 1.18rem; letter-spacing: -.01em;
  margin-bottom: 10px; padding-left: 20px; position: relative;
}
.liste li > span:first-child::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; background: var(--ocre-a);
}
.liste li > span:first-child .marqueur { display: inline-block; margin: 0 0 0 8px; vertical-align: 3px; }

/* Les étapes : quatre blocs numérotés, le numéro en grand. */
.etapes { border-top: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.etapes li {
  padding: 22px 24px 24px; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte);
}
.etapes li::before {
  position: static; display: block; font-family: var(--t); font-size: 2rem; line-height: 1;
  margin-bottom: 14px; color: var(--ocre);
}
.etapes span { font-size: 1.08rem; margin-bottom: 8px; }

.liste, .etapes { margin-bottom: 30px; }
/* Version alternée : la barre et le haut de page sont deux blocs sombres sur un
   fond clair, et un pixel du fond passait entre les deux. On les soude. */
html.v-alterne .hero { margin-top: -1px; }

/* Les questions : plus d'air entre elles */
.qr { padding: 32px 0; }

@media (max-width: 900px) {
  .sec { padding-top: 84px; padding-bottom: 84px; }
  .etapes { grid-template-columns: 1fr; }
  .etapes li { padding-left: 22px; }
  .liste li { padding: 20px; }
}

/* ── L'illustration à droite du titre (page Création) ─────────────────── */
.hero--page:has(.illus) { grid-template-columns: minmax(0, 1fr) 470px; column-gap: 64px; }
.illus { position: relative; width: 100%; max-width: 470px; margin: 34px 0 10px; font-family: var(--f); }
.illus__ecran {
  border: 1.5px solid var(--trait); border-radius: 10px; overflow: hidden;
  background: var(--carte); box-shadow: 0 30px 60px -34px rgba(0,0,0,.45);
}
.illus__barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.illus__barre b { width: 8px; height: 8px; border-radius: 50%; background: var(--trait); }
.illus__barre span {
  margin-left: 12px; flex: 1; font-size: .72rem; color: var(--gris);
  background: var(--fond); border-radius: 4px; padding: 3px 10px;
}
.illus__page { padding: 18px 20px 22px; }
.illus__nav { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.illus__nav em { width: 14px; height: 14px; border-radius: 3px; background: var(--ocre-a); margin-right: auto; }
.illus__nav s { width: 34px; height: 6px; border-radius: 3px; background: var(--trait); }
.illus__titre { height: 16px; width: 78%; border-radius: 4px; background: var(--texte); margin-bottom: 9px; }
.illus__titre--court { width: 52%; margin-bottom: 16px; }
.illus__ligne { height: 7px; width: 88%; border-radius: 4px; background: var(--trait); margin-bottom: 7px; }
.illus__ligne--court { width: 64%; }
.illus__bouton {
  display: inline-block; margin: 14px 0 20px; padding: 7px 14px; border-radius: 4px;
  background: var(--ocre-a); color: #0E1714; font-size: .74rem; font-weight: 600;
}
.illus__blocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.illus__blocs i { height: 64px; border-radius: 6px; background: var(--fond-2); border: 1px solid var(--trait); }

/* La version téléphone, posée sur le coin de l'écran */
.illus__tel {
  position: absolute; right: -18px; bottom: 74px; width: 112px;
  border: 2px solid var(--texte); border-radius: 18px; padding: 6px; background: var(--carte);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.55);
}
.illus__tel > div { border-radius: 12px; background: var(--fond); padding: 10px 8px 12px; }
.illus__tel em { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--ocre-a); margin-bottom: 10px; }
.illus__tel .illus__titre { height: 9px; margin-bottom: 6px; width: 90%; }
.illus__tel .illus__titre--court { width: 60%; margin-bottom: 10px; }
.illus__tel .illus__ligne { height: 5px; }
.illus__tel .illus__bouton { margin: 8px 0 8px; padding: 4px 6px; font-size: .52rem; display: block; text-align: center; }
.illus__tel .illus__blocs { grid-template-columns: 1fr; gap: 5px; }
.illus__tel .illus__blocs i { height: 18px; border-radius: 3px; }

/* Les cotes, reprises de l'accueil */
.illus .cotation--h { top: -28px; }
.illus .cotation--v { left: auto; right: -46px; top: auto; bottom: 74px; height: 214px; }

/* Le cartouche du dessin technique : les faits de l'offre, pas des slogans */
.illus__cartouche {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; margin-top: 18px;
  border: 1.5px solid var(--texte); font-size: .74rem;
}
.illus__cartouche > div { padding: 7px 10px; border-right: 1px solid var(--texte); }
.illus__cartouche > div:last-child { border-right: none; }
.illus__cartouche dt { color: var(--gris); font-size: .66rem; text-transform: none; }
.illus__cartouche dd { font-weight: 600; color: var(--texte); white-space: nowrap; }
.illus__cartouche > div:first-child dd { font-family: var(--t); }

@media (max-width: 1180px) {
  .hero--page:has(.illus) { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; }
}
@media (max-width: 860px) {
  .hero--page:has(.illus) { grid-template-columns: 1fr; }
  .illus { order: 2; max-width: 340px; margin: 50px 0 0; }
  .illus__tel { width: 84px; right: -6px; bottom: 116px; }
  .illus .cotation--v { display: none; }
  .illus__cartouche { grid-template-columns: 1fr 1fr; }
  .illus__cartouche > div:nth-child(2) { border-right: none; }
  .illus__cartouche > div:nth-child(-n+2) { border-bottom: 1px solid var(--texte); }
  .illus__page { padding: 14px 14px 16px; }
  .illus__blocs i { height: 44px; }
}

/* ── Le bandeau de navigation entre maquettes (pas dans le site) ──────── */
.maq {
  font: 600 13px/1.3 -apple-system, sans-serif; background: #FFF4D6; color: #3A2A05;
  padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.maq a { color: #3A2A05; text-decoration: underline; }
.maq a[aria-current] { text-decoration: none; background: #3A2A05; color: #FFF4D6; padding: 2px 6px; border-radius: 3px; }
.sans-maq .maq { display: none; }

/* ── Menu en deux offres, déroulant (choix d'Antoine, 30/10/2026) ─────── */
.barre__nav--menus { align-items: center; }
.deroul { position: relative; }
.deroul summary { list-style: none; cursor: pointer; color: var(--gris); font-size: .95rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; }
.deroul summary::-webkit-details-marker { display: none; }
.deroul summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.deroul[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.deroul summary:hover, .deroul[open] summary { color: var(--texte); }
.deroul--actif summary { color: var(--texte); }
.deroul--actif summary { text-decoration: underline 2px var(--ocre-a); text-underline-offset: 9px; }
.deroul__panneau { position: absolute; top: calc(100% + 14px); left: -16px; z-index: 50; min-width: 240px; padding: 8px;
  display: grid; background: #16211D; border: 1px solid rgba(240,235,224,.14); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.barre__nav .deroul__panneau a { padding: 10px 12px; border-radius: 6px; color: #C9D1CC; white-space: nowrap; }
.barre__nav .deroul__panneau a:hover { background: rgba(240,235,224,.07); color: #F0EBE0; }
.barre__nav .deroul__panneau a[aria-current="page"] { color: #F0EBE0; background: rgba(216,140,34,.14); }
.barre__nav .deroul__panneau a[aria-current="page"]::after { display: none; }
@media (max-width: 900px) {
  .barre__nav--menus { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; gap: 18px; }
  .deroul { position: static; }
  .deroul summary { font-size: .92rem; white-space: nowrap; }
  .deroul__panneau { left: 22px; right: 22px; top: auto; margin-top: 12px; min-width: 0; }
}
/* Le haut de page (position: relative) passait par-dessus le panneau du menu : la barre passe devant. */
.barre:has(.deroul) { z-index: 30; }
/* Le site étend le fond de la barre par une ombre + clip-path (site.css), et ce découpage coupait
   le panneau du menu (vu le 30/10). Pour la barre seule : un border-image qui ne déborde
   qu'à gauche et à droite, sans rien découper. */
html.v-alterne .barre:has(.deroul) { clip-path: none; box-shadow: none;
  border-image: linear-gradient(#0E1714 0 0) fill 0 / 0 / 0 100vmax; }