/* CAM · feuille de style du site. Mise en page inspirée de la référence fournie par Alexandre (2026-10-19)
   Grande photo de couverture, titres en deux tons, coins arrondis, fiches d'info. Noir et blanc. */

/* Poppins (police du site actuel), remise le 2026-10-21 à la demande d'Alexandre */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  --encre: #121418;
  --texte: #5b6069;
  --pale: #6b6f76;  /* contraste 4,5:1 sur le gris des cartes (WCAG AA) */
  --carte: #f2f3f5;
  --ligne: #e3e5e8;
  --blanc: #fff;
  /* palette : noir et blanc, bleu pour les liens et le focus, couleurs du site actuel pour les boutons et le voile du haut */
  --noir: #0e0f11;
  --accent: #0052ff;                   /* bleu choisi par Alexandre le 2026-10-21 : liens, focus, cases */
  --accent-fonce: #0042cc;
  --marine: #000e4b;                   /* bleu marine du site actuel : voile de la photo du haut */
  --bouton: var(--accent);             /* boutons pleins : bleu électrique (choix d'Alexandre, 2026-10-22; le vert menthe d'avant a été retiré) */
  --bouton-fonce: var(--accent-fonce);
  --sur-bouton: var(--blanc);          /* texte posé sur le bleu */
  --menthe: #74e8c5;                   /* vert menthe du site actuel : seulement la petite vague de la fenêtre « Zone desservie » */
  --rayon: 24px;
  /* espacements verticaux */
  --espace: clamp(96px, 10vw, 160px);       /* entre deux sections */
  --espace-tete: clamp(48px, 4.5vw, 64px);  /* sous l'en-tête d'une section */
  --espace-blocs: clamp(56px, 6vw, 96px);   /* entre deux blocs d'une même section */
  --max: 1280px;
  --police: "Poppins";
  --gouttiere: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police), system-ui, sans-serif; font-size: 16px; line-height: 1.65; color: var(--texte); background: var(--blanc); }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 10px 16px; background: var(--blanc); color: var(--encre); }
.saut:focus { left: 8px; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.cadre { width: 100%; max-width: calc(var(--max) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------- Titres en deux tons ---------- */
.titre { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; color: var(--encre); text-wrap: balance; }
.titre span { display: block; }  /* titres d'une seule couleur (2026-10-21) */
.petit { font-size: 15px; line-height: 1.7; color: var(--texte); text-wrap: pretty; }
.etiquette { font-size: 12px; color: var(--pale); }

/* ---------- Boutons ---------- */
.pilule { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px 6px 22px; border-radius: 999px; border: 0; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.pilule-accent { background: var(--bouton); color: var(--sur-bouton); }
.pilule-accent:hover { background: var(--bouton-fonce); }
/* flèche simple, de la couleur du texte (le rond marine a été retiré le 2026-10-21) */
.pilule .rond { display: grid; place-items: center; width: 24px; height: 36px; transition: transform .2s; }
.pilule:hover .rond { transform: translateX(3px); }
.pilule .rond .ico { width: 15px; height: 15px; }
.pilule-contour { padding: 0 22px; border: 1px solid currentColor; background: transparent; color: var(--encre); }
.pilule-contour:hover { background: var(--encre); color: var(--blanc); }
.pilule-contour .ico { width: 16px; height: 16px; }
.rond-fleche { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre); text-decoration: none; transition: background-color .2s, color .2s, transform .2s; }
.rond-fleche .ico { width: 22px; height: 22px; }
.rond-fleche:hover { transform: rotate(-45deg); }
.rond-fleche.plein { border-color: var(--bouton); background: var(--bouton); color: var(--sur-bouton); }

/* ---------- En-tête : transparent sur la photo, blanc au défilement ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--blanc); transition: background-color .25s, box-shadow .25s, color .25s; }
.entete > .cadre { display: flex; align-items: center; gap: 24px; height: 88px; }
.logo { flex: none; }
.logo img { width: 88px; height: 54px; }  /* logo sans le losange (2026-10-21) */
.logo .logo-couleur { display: none; }
.nav { align-self: stretch; margin: 0 auto; }
.nav > ul { display: flex; gap: 4px; height: 100%; }
.nav > ul > li { display: flex; align-items: center; }  /* toute la hauteur de la barre : le survol continue jusqu'au sous-menu */
.nav li { position: relative; }
/* survol du menu : petite pastille de fond, sans soulignement */
.nav > ul > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s; }
@media (hover: hover) and (min-width: 1025px) {
  .nav > ul > li > a:hover { background: rgb(255 255 255 / .16); }
  .entete-defile .nav > ul > li > a:hover, .entete:has(.avec-menu-large:hover) .nav > ul > li > a:hover { background: var(--carte); }
}
@media (min-width: 1025px) {
  .nav > ul > li.ouvert > a, .nav > ul > li:focus-within > a { background: rgb(255 255 255 / .16); }
  .entete-defile .nav > ul > li.ouvert > a, .entete-defile .nav > ul > li:focus-within > a, .entete:has(.avec-menu-large.ouvert) .nav > ul > li.ouvert > a, .entete:has(.avec-menu-large:focus-within) .nav > ul > li:focus-within > a { background: var(--carte); }
}
.nav .ico-bas { width: 9px; height: 9px; }
.sous-menu { position: absolute; top: 100%; left: 0; min-width: 300px; padding: 10px; background: var(--blanc); border-radius: 18px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .25); color: var(--encre); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav li:hover > .sous-menu, .nav li:focus-within > .sous-menu, .nav li.ouvert > .sous-menu { opacity: 1; visibility: visible; transform: none; }
/* écrans tactiles : le sous-menu s'ouvre au premier toucher (voir v3.js), pas au survol */
@media (hover: none) { .nav li:hover > .sous-menu { opacity: 0; visibility: hidden; } .nav li.ouvert > .sous-menu { opacity: 1; visibility: visible; } }
.sous-menu ul a { display: block; padding: 9px 14px; border-radius: 10px; font-size: 14px; text-decoration: none; }
.sous-menu ul a:hover, .sous-menu ul a[aria-current] { background: var(--carte); }
.sous-menu .groupe { padding: 10px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
/* mega menu Services : panneau blanc pleine largeur sous la barre; 3 colonnes de services (outils/construire-menu.py) et, à droite,
   les cartes Restauration et Escaliers et la vidéo (forme choisie par Alexandre sur maquettes, 2026-10-26) */
.nav li.avec-menu-large { position: static; }
.menu-large { left: 0; right: 0; min-width: 0; padding: 0; border-top: 1px solid var(--ligne); border-radius: 0; box-shadow: 0 40px 60px -40px rgb(0 0 0 / .35); }
.menu-large-grille { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 48px; padding-top: 32px; padding-bottom: 32px; }
.menu-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; align-content: start; }
.menu-colonnes ul + .groupe { margin-top: 22px; }
.sous-menu .groupe { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--encre); }
.groupe-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--ligne); border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.ico-trait { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-large ul a { padding: 7px 12px; font-size: 14.5px; line-height: 1.35; color: var(--texte); }
.menu-large ul a:hover, .menu-large ul a[aria-current] { color: var(--encre); }
/* spécialité en vedette dans le méga menu : grande carte photo sous les colonnes (Restauration, 2026-10-21) */
.menu-specialite { position: relative; isolation: isolate; grid-column: 1 / -1; overflow: hidden; margin-top: 16px; border-radius: 20px; background: var(--noir); color: var(--blanc); }
.menu-specialite picture, .menu-specialite img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.menu-specialite img { object-fit: cover; object-position: 60% 35%; }
.menu-specialite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 15 17 / .88) 0%, rgb(14 15 17 / .62) 42%, rgb(14 15 17 / .05) 85%); }
.menu-specialite-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 32px; }
.menu-specialite-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.menu-specialite-label .ico { width: 16px; height: 16px; }
.menu-specialite-titre { font-size: 28px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.menu-specialite-phrase { max-width: 40em; font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .82); }
.menu-specialite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.menu-specialite-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.sous-menu .menu-specialite-liens a { padding: 6px 12px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: rgb(255 255 255 / .12); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--blanc); }
.sous-menu .menu-specialite-liens a:hover { background: rgb(255 255 255 / .24); color: var(--blanc); }
.menu-specialite-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--blanc); font-size: 14px; font-weight: 600; color: var(--noir); text-decoration: none; transition: transform .2s; }
.menu-specialite-bouton .ico { width: 15px; height: 15px; transition: transform .2s; }
.menu-specialite-bouton:hover .ico { transform: translateX(3px); }
/* les deux spécialités (Restauration, Escaliers), l'une sous l'autre dans la colonne de droite */
.menu-droite { display: grid; align-content: start; gap: 14px; }
.menu-vedettes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.menu-vedettes .menu-specialite { grid-column: auto; margin-top: 0; }
.menu-vedettes .menu-specialite-texte { padding: 24px 26px; }
.menu-vedettes .menu-specialite-titre { font-size: 23px; }
.menu-vedettes .menu-specialite::before { background: linear-gradient(90deg, rgb(14 15 17 / .9) 0%, rgb(14 15 17 / .7) 55%, rgb(14 15 17 / .25) 100%); }
/* Escaliers : l'escalier 3D détouré sort de la carte par le haut et par la droite, comme sur le site actuel */
.menu-specialite-escaliers { overflow: visible; background: none; }
.menu-specialite-escaliers > picture:first-child img { border-radius: 20px; object-position: 30% 40%; }
.menu-vedettes .menu-specialite-escaliers::before { border-radius: 20px; background: linear-gradient(90deg, rgb(0 14 75 / .55) 0%, rgb(0 14 75 / .2) 60%, rgb(0 14 75 / 0) 100%); }
.menu-specialite-escaliers .menu-specialite-texte { position: relative; z-index: 2; max-width: 62%; }
.menu-vedettes .menu-specialite-escaliers .menu-specialite-titre { font-size: 22px; }
.menu-specialite-escaliers .menu-specialite-bouton { white-space: nowrap; }
.menu-specialite .menu-specialite-rendu, .menu-specialite .menu-specialite-rendu img { inset: auto -22px -2px auto; z-index: 1; width: auto; height: 120%; pointer-events: none; }
.menu-specialite .menu-specialite-rendu img { position: static; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .35)); }
/* écrans peu hauts (portables 720 à 860 px, iPad à l'horizontale) : carte plus compacte, et le menu défile au besoin */
@media (min-width: 1025px) and (max-height: 860px) {
  .menu-specialite-texte { gap: 8px; padding: 20px 28px; }
  .menu-specialite-titre { font-size: 24px; }
  .menu-specialite-phrase { display: none; }
  .menu-vedettes .menu-specialite-texte { padding: 20px 24px; }
  .menu-vedettes .menu-specialite-titre, .menu-vedettes .menu-specialite-escaliers .menu-specialite-titre { font-size: 21px; }
  .menu-colonnes ul + .groupe { margin-top: 12px; }
  .menu-large-grille { padding-top: 24px; padding-bottom: 24px; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  .menu-large-grille { padding-top: 18px; padding-bottom: 18px; }
  .menu-large ul a { padding-block: 5px; }
  .menu-vedettes .menu-specialite-label { display: none; }
  .menu-vedettes .menu-specialite-texte { gap: 8px; padding: 16px 22px; }
  .menu-vedettes .menu-specialite-titre, .menu-vedettes .menu-specialite-escaliers .menu-specialite-titre { font-size: 19px; }
}
@media (min-width: 1025px) { .menu-large { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; } }
/* grand écran : cartes réduites (titre et boutons), la vidéo dessous (image fixe; le bouton lecture ouvre la vraie vidéo, rien ne joue tout seul) */
@media (min-width: 1025px) {
  .menu-droite .menu-specialite-phrase, .menu-droite .menu-specialite-label { display: none; }
  .menu-vedettes .menu-specialite-texte { gap: 12px; padding: 18px 22px; }
  .menu-vedettes .menu-specialite-titre, .menu-vedettes .menu-specialite-escaliers .menu-specialite-titre { font-size: 20px; }
  .menu-vedettes .menu-specialite-actions { margin-top: 0; }
  .menu-vedettes .menu-specialite-bouton { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
  .menu-vedettes .menu-specialite-liens { flex-wrap: nowrap; gap: 6px; }
  .sous-menu .menu-vedettes .menu-specialite-liens a { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
  .menu-vedettes .menu-specialite .menu-specialite-rendu { right: 8px; bottom: 0; height: 118%; }  /* sort par le haut seulement : la vidéo est juste dessous */
}
.menu-video-droite { display: grid; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--encre); text-align: left; cursor: pointer; }
.menu-video-droite-image { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--noir); }
.menu-video-droite-image img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .5s; }
.menu-video-droite:hover .menu-video-droite-image img { transform: scale(1.04); }
.menu-video-droite .rond-jouer { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.menu-video-droite:hover .rond-jouer { transform: scale(1.08); }
.menu-video-droite-texte { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.menu-video-droite-texte strong { font-size: 14px; }
.menu-video-droite-texte span { font-size: 12.5px; color: var(--pale); }
/* la barre devient blanche quand le mega menu est ouvert */
@media (hover: hover) { .entete:has(.avec-menu-large:hover) { background: var(--blanc); color: var(--encre); } .entete:has(.avec-menu-large:hover) .logo-blanc { display: none; } .entete:has(.avec-menu-large:hover) .logo-couleur { display: block; } }
.entete:has(.avec-menu-large:focus-within), .entete:has(.avec-menu-large.ouvert) { background: var(--blanc); color: var(--encre); }
.entete:has(.avec-menu-large:focus-within) .logo-blanc, .entete:has(.avec-menu-large.ouvert) .logo-blanc { display: none; }
.entete:has(.avec-menu-large:focus-within) .logo-couleur, .entete:has(.avec-menu-large.ouvert) .logo-couleur { display: block; }
.menu-btn { display: none; width: 46px; height: 46px; margin-left: auto; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: inherit; cursor: pointer; }
.menu-btn .ico { width: 22px; height: 22px; margin: auto; }
.entete-defile { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 0 var(--ligne); }
.entete-defile .logo .logo-blanc { display: none; }
.entete-defile .logo .logo-couleur { display: block; }
.entete-defile .menu-btn { background: var(--carte); }

/* ---------- Couverture : panneau foncé sur la photo, chiffres, carte vidéo ---------- */
.couverture { position: relative; isolation: isolate; display: flex; min-height: max(660px, min(100svh, 900px)); padding: 112px 0 clamp(28px, 4vw, 48px); color: var(--blanc); overflow: hidden; }
.couverture-photo, .couverture-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.couverture-photo img { object-fit: cover; object-position: 62% 50%; }  /* garde le coin de mur dans le cadre, même en portrait */
/* photo assombrie à gauche, là où est le texte : lisible sans panneau */
.couverture::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(14 15 17 / .4) 0%, rgb(14 15 17 / 0) 22%), linear-gradient(90deg, rgb(14 15 17 / .86) 0%, rgb(14 15 17 / .66) 38%, rgb(14 15 17 / .2) 72%, rgb(14 15 17 / 0) 100%); }  /* noir en dégradé (choix d'Alexandre, 2026-10-22) : foncé derrière le texte à gauche, la brique reste naturelle à droite */
/* fil d'Ariane, titre et boutons centrés en hauteur; chiffres en bas */
.couverture-grille { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 32px 24px; }
.couverture-panneau { display: contents; }
.couverture-panneau > div { grid-column: 1 / -1; align-self: center; max-width: 900px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: rgb(255 255 255 / .72); }
.fil li { display: flex; align-items: center; min-height: 28px; }
.fil li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .6; }  /* la barre reste au bout de la ligne si le fil passe à la ligne */
.fil a { display: inline-flex; align-items: center; min-height: 28px; color: var(--blanc); text-decoration: none; }
.fil a { transition: opacity .2s; }
.fil a:hover { opacity: .7; }
.couverture h1 { -webkit-text-stroke: .022em currentColor; paint-order: stroke fill; max-width: 12.4em; margin-top: 20px; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; color: var(--blanc); text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .3); }
.couverture-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.couverture .pilule-contour { color: var(--blanc); border-color: rgb(255 255 255 / .55); }
.couverture .pilule-contour:hover { background: var(--blanc); color: var(--noir); }
/* bouton lecture rond, à côté du téléphone : ouvre la vidéo dans une fenêtre */
.video-ouvrir { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / .55); border-radius: 50%; background: transparent; color: var(--blanc); cursor: pointer; transition: background-color .2s, color .2s; }
.video-ouvrir:hover { background: var(--blanc); color: var(--noir); }
.video-ouvrir .ico { width: 16px; height: 16px; margin-left: 2px; }
.couverture-chiffres { grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 3vw, 44px); }
.couverture-chiffres li { display: flex; align-items: center; gap: 12px; }
.couverture-chiffres strong { font-size: clamp(32px, 3.2vw, 46px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.couverture-chiffres span { max-width: 9.5em; font-size: 14px; line-height: 1.35; color: rgb(255 255 255 / .78); }
.rond-jouer { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--blanc); color: var(--noir); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .5); transition: transform .2s; }
.rond-jouer .ico { width: 18px; height: 18px; margin-left: 3px; }

/* ---------- Section : introduction ---------- */
.intro { padding: var(--espace) 0 var(--espace-blocs); }
.intro-grille { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.intro-photo img { width: 100%; border-radius: var(--rayon); }
.intro .petit { margin-top: 24px; }
.intro .petit + .petit { margin-top: 14px; }
/* variante (page balcon) : texte à gauche, galerie de 5 photos à droite, comme la page actuelle */
.intro-galerie { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.galerie a, .galerie picture { display: block; height: 100%; }
.galerie a { overflow: hidden; border-radius: 16px; background: var(--ligne); }
.galerie img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s; }
.galerie a:hover img { transform: scale(1.05); }
.galerie .galerie-haute { grid-row: span 2; }
.galerie .galerie-haute img { aspect-ratio: auto; }

/* ---------- Section : découvrez qui nous sommes (grande bannière vidéo, toute la surface est cliquable) ---------- */

/* ---------- Section : services résidentiels ---------- */
.services { padding: 0 0 var(--espace); }
.entete-section { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; margin-bottom: var(--espace-tete); }
.entete-section .petit { max-width: 32em; justify-self: end; }
/* variante : la phrase d'introduction sous le titre, alignée à gauche (Expertise, 2026-10-22) */
.entete-pile { display: block; }
.entete-pile .titre span { display: inline; }
.entete-pile .petit { max-width: none; justify-self: start; margin-top: 24px; font-size: 16.5px; line-height: 1.75; }
/* Services résidentiels : en bloc comme le site actuel (titre pleine largeur, paragraphes les uns sous les autres), choisi le 2026-10-21 */
.services .titre span { display: inline; }
.services-bloc { display: grid; gap: 22px; margin-top: 32px; }
.services-bloc .petit { font-size: 16.5px; line-height: 1.75; }
.petit strong { font-weight: 600; color: var(--encre); }
/* liens dans le texte : bleu et gras, sans soulignement; léger surlignage au survol */
.petit a { margin: 0 -2px; padding: 0 2px; border-radius: 4px; font-weight: 600; color: var(--accent); text-decoration: none; transition: background-color .2s, color .2s; }
.petit a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-fonce); }

/* ---------- Section : commercial et permis (grand fond gris, carte blanche qui dépasse à droite) ---------- */
.commercial { padding: 0 0 var(--espace); }
/* la carte grise s'arrête avant le bord droit; la carte blanche des permis dépasse et finit pile sur le bord du site */
.carte-grise { --retrait: clamp(0px, 5vw, 72px); --marge: clamp(32px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(32px, 4vw, 64px); align-items: start; margin-right: var(--retrait); padding: var(--marge); border-radius: var(--rayon); background: var(--carte); }
.carte-grise-seule { grid-template-columns: minmax(0, 1fr); margin-right: 0; }  /* bloc de texte sur fond gris, sans encadré (comme la page d'origine), toute la largeur (Alexandre, 2026-11-02) */
.commercial .petit { max-width: 40em; margin-top: 22px; }
.commercial-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.carte-permis { margin: clamp(24px, 4vw, 64px) calc(-1 * (var(--marge) + var(--retrait))) 0 0; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--ligne); border-radius: 20px; background: var(--blanc); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .22); }
.carte-permis-haut { margin-top: 0; }  /* pages de l'ancien modèle (« Pas de soucis concernant ») : texte court, la carte s'aligne sur le haut du texte (Alexandre, 2026-11-02) */
.carte-permis h2 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.carte-permis p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--texte); }
.lien-plus { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; color: var(--encre); font-size: 14px; font-weight: 600; text-decoration: none; }
.lien-plus .ico { width: 18px; height: 18px; transition: transform .2s; }
.lien-plus:hover { color: var(--accent); }
.lien-plus:hover .ico { transform: translate(2px, -2px); }
/* encadré des escaliers (page balcon) : le rendu 3D sort du bas de la carte, comme la page actuelle */
.carte-escaliers { position: relative; }
.carte-escaliers .lien-plus { position: relative; z-index: 1; }
.carte-escaliers-rendu { position: absolute; right: 20px; bottom: -22px; width: 100px; pointer-events: none; }  /* escalier réaliste, remonté : il dépasse à peine sous la carte (choix B d'Alexandre, 2026-11-02) */
.carte-escaliers-rendu img { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .25)); }
.carte-escaliers p { padding-right: 96px; }

/* ---------- Section : photos de chantier ---------- */
.photos { padding: 0 0 var(--espace); }
.photos-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.photos-grille a { display: block; overflow: hidden; border-radius: var(--rayon); background: var(--ligne); }
.photos-grille img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s; }
.photos-grille a:hover img { transform: scale(1.05); }

/* ---------- Section : expertise locale ---------- */
.expertise { padding: 0 0 var(--espace); }
/* trois colonnes de texte, sans cartes (choix d'Alexandre, 2026-10-22) : c'est le fond gris de la FAQ qui sépare */
.cartes-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.carte-info h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.carte-info p { margin-top: 12px; font-size: 15px; line-height: 1.7; }

/* ---------- Blocs des pages de service migrées (2026-10-22) : même gabarit, contenu des pages d'origine ---------- */
.bloc { padding: 0 0 var(--espace-blocs); }
.couverture + .bloc { padding-top: var(--espace); }  /* page qui commence par un bloc de texte sans introduction (permis FR et EN, terrasse d'aluminium EN) : même espace sous la photo du haut que l'introduction des autres pages (Alexandre, 2026-11-03 : le titre « collé sur l'image ») */
.bloc-serre { padding-bottom: 32px; }
.bloc-texte > .titre-suivant, .bloc-texte > .texte + .titre { margin-top: var(--espace-blocs); }  /* un titre sous un paragraphe : de l’air au-dessus (moellons, terrasse d’aluminium EN) */
.carte-grise-texte > .titre-suivant, .carte-grise-texte > .texte + .titre { margin-top: clamp(32px, 3.5vw, 48px); }  /* même chose dans une carte grise (revêtement acrylique, terrasse d'aluminium soudé) : le titre ne colle plus au paragraphe */
.sous-titre { margin-top: 36px; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.texte p, .texte li { font-size: 16.5px; line-height: 1.75; }
.texte p + p, .texte p + ul, .texte ul + p, .texte p + ol { margin-top: 14px; }
.texte ul, .texte ol { padding-left: 1.2em; }
.texte ul { list-style: disc; }
.texte ol { list-style: decimal; }
.texte li + li { margin-top: 6px; }
.texte h3, .texte h4 { margin: 24px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--encre); }
.texte strong { font-weight: 600; color: var(--encre); }
.texte a { margin: 0 -2px; padding: 0 2px; border-radius: 4px; font-weight: 600; color: var(--accent); text-decoration: none; transition: background-color .2s, color .2s; }
.texte a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-fonce); }
/* adresse courriel cachée aux robots (politique de confidentialité) : bouton à l'allure d'un lien, remplacé au clic par le
   lien mailto (js/site.js) */
.courriel-cache { display: inline-block; min-height: 24px; margin: 0 -2px; padding: 0 2px; border: 0; border-radius: 4px; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; transition: background-color .2s, color .2s; }
.courriel-cache:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-fonce); }
.titre + .texte, .titre + .sous-titre, .sous-titre + .texte { margin-top: 20px; }
.texte + .texte, .texte + .atouts, .atouts + .texte, .texte + .photos-grille, .photos-grille + .texte { margin-top: 24px; }
.bloc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bloc-texte > .lien-plus, .carte-permis .lien-plus { margin-top: 12px; }
.cartes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.photos-grille.photos-1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.photos-grille.photos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photos-grille.photos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.intro-medias .galerie a { aspect-ratio: 16 / 10; }
.intro-medias .galerie li:only-child { grid-column: 1 / -1; }
.media-legende p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--pale); }
.media-video { display: block; width: 100%; border-radius: var(--rayon); background: var(--noir); }
.media-youtube { position: relative; display: block; overflow: hidden; margin-top: 16px; border-radius: 16px; background: var(--noir); }
.media-youtube img, .media-youtube iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; object-fit: cover; }
.media-youtube .rond-jouer { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.faq-reponse { padding: 0 60px 24px 0; }
.faq-reponse p, .faq-reponse li { font-size: 15.5px; line-height: 1.75; }
.faq-reponse p + p, .faq-reponse ul { margin-top: 12px; }
.faq-reponse ul { padding-left: 1.2em; list-style: disc; }
.faq-reponse a:not(.lien-plus) { font-weight: 600; color: var(--accent); text-decoration: none; }
.estimation-intro p { font-size: 17px; line-height: 1.75; }
/* Bande noire en haut de page, sans photo (fiches réalisation, listes de réalisations, contact…) : fil d'Ariane, titre,
   bouton; le bloc qui suit (galerie, cartes) déborde sur la bande de --chevauche (choix 2 d'Alexandre, 2026-10-26) */
.bande-projet, .bande-projet + section { --chevauche: clamp(110px, 13vw, 210px); }
.bande-projet { padding: 128px 0 calc(var(--chevauche) + 52px); background: var(--noir); color: var(--blanc); }
.bande-projet h1 { max-width: 16em; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; color: var(--blanc); text-wrap: balance; }
.bande-projet-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; margin-top: 14px; }
.bande-projet .couverture-actions { margin-top: 26px; }
.bande-sous-titre { max-width: 34em; margin-top: 16px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; font-weight: 500; color: rgb(255 255 255 / .82); }
@media (max-width: 1024px) { .bande-projet-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .bande-projet, .bande-projet + section { --chevauche: 70px; } .bande-projet { padding-top: 100px; } }

/* escaliers : le rendu 3D et ses points forts, à droite de la couverture (comme la page actuelle) */
.couverture-points { position: absolute; right: max(24px, calc((100% - var(--max)) / 2)); bottom: 6%; z-index: 0; width: clamp(200px, 20vw, 300px); margin: 0; }
.couverture-points img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .45)); }
/* page Fabrication d'escalier : l'escalier et ses points forts à côté du texte sur les escaliers en aluminium (choix E d'Alexandre, 2026-11-02; en haut, il se perdait dans la photo de l'atelier) */
.bloc-points .bloc-texte { display: grid; grid-template-columns: minmax(0, 1fr) 330px; column-gap: clamp(48px, 6vw, 96px); align-items: start; }
.bloc-points .bloc-texte > * { grid-column: 1; }
.bloc-points .bloc-texte > .escalier-points { grid-column: 2; grid-row: 1 / span 9; align-self: center; justify-self: end; }
.escalier-points { position: relative; width: 240px; margin: 0 20px 0 0; }
.escalier-points img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .25)); }
.escalier-points span { border: 1px solid var(--ligne); box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
.couverture-points ul, .escalier-points ul { position: absolute; inset: 0; }
.couverture-points li, .escalier-points li { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid var(--blanc); border-radius: 50%; background: var(--accent); box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.couverture-points span, .escalier-points span { position: absolute; right: 26px; top: 50%; padding: 6px 12px; border-radius: 999px; background: var(--blanc); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--encre); white-space: nowrap; transform: translateY(-50%); }

/* ---------- Section : FAQ ---------- */
.faq { margin-bottom: var(--espace); padding: var(--espace) 0; background: var(--carte); }  /* bande grise pleine largeur, comme le site actuel */
.faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.faq-grille .petit { margin-top: 18px; max-width: 26em; }
.faq-liste details { border-bottom: 1px solid var(--ligne); }
.faq-liste details:first-child { border-top: 1px solid var(--ligne); }
.faq-liste summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 17px; font-weight: 600; color: var(--encre); cursor: pointer; list-style: none; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste .plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne); }
.faq-liste .plus::before, .faq-liste .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--encre); transition: transform .2s; }
.faq-liste .plus::after { transform: rotate(90deg); }
.faq-liste details[open] .plus::after { transform: rotate(0); }

/* ---------- Section : avis ---------- */
.avis { padding: 0 0 var(--espace); }
.avis .titre { margin-bottom: var(--espace-tete); }
.avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.avis-carte { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--rayon); background: var(--carte); }
.avis-auteur { display: grid; justify-items: start; gap: 6px; padding-right: 36px; color: var(--encre); text-decoration: none; }
.avis-auteur strong { font-size: 16px; font-weight: 700; }
.avis-auteur strong { transition: color .2s; }
.avis-auteur:hover strong { color: var(--accent); }
.avis-role { font-size: 13px; color: var(--pale); }
.etoiles { display: inline-flex; gap: 3px; color: var(--encre); }
.etoiles .ico { width: 15px; height: 15px; }
.avis-google { position: absolute; top: clamp(24px, 2.4vw, 32px); right: clamp(24px, 2.4vw, 32px); width: 20px; height: 20px; color: var(--pale); }
.avis-carte blockquote { font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--encre); }

/* ---------- Section : pourquoi CAM ---------- */
/* en bloc comme le site actuel, les 4 atouts en grille de 2 sans lignes (choix B d'Alexandre, 2026-10-22) */
.pourquoi { padding: 0 0 var(--espace); }
.pourquoi .entete-section { margin-bottom: 40px; }
.pourquoi-grille h3 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.pourquoi-grille h3 strong { font-weight: inherit; }
.pourquoi-grille > div { margin-top: 14px; }
.pourquoi-grille .petit { font-size: 16.5px; line-height: 1.75; }
.pourquoi-grille .petit + .petit { margin-top: 14px; }
.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-top: 44px; }
.atouts h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--encre); }
.atouts p { margin-top: 8px; font-size: 16px; line-height: 1.7; }
.atouts strong { font-weight: 600; color: var(--encre); }
.conclusion { margin-top: 40px; font-size: 20px; line-height: 1.5; }
.conclusion strong { font-weight: 700; color: var(--encre); }

/* ---------- Section : formulaire d'estimation ---------- */
.estimation { padding: var(--espace) 0; background: var(--carte); }
.estimation-grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.estimation-cote { position: sticky; top: 120px; }
.estimation-intro { margin-bottom: clamp(32px, 4vw, 56px); font-size: 17px; line-height: 1.75; }
.estimation-appel { margin-top: 28px; font-size: 14px; color: var(--pale); }
.estimation-tel { display: block; margin-top: 4px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; color: var(--encre); text-decoration: none; }
.btn-zone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; padding: 0 18px; border: 1px solid var(--encre); border-radius: 999px; background: transparent; color: var(--encre); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-zone:hover { background: var(--encre); color: var(--blanc); }
.btn-zone .ico { width: 15px; height: 15px; }
.formulaire { display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 44px); border-radius: var(--rayon); background: var(--blanc); }
.formulaire h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.formulaire h3 { margin-top: 6px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--encre); }
.champ { min-width: 0; }
.champ label, .champ legend { display: block; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 500; color: var(--encre); }
.champ .requis { color: #c0392b; }
.champ input[type=text], .champ input[type=email], .champ input[type=tel], .champ select, .champ textarea { width: 100%; max-width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--ligne); border-radius: 12px; background: #fafbfc; color: var(--encre); font-size: 15px; text-overflow: ellipsis; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: var(--blanc); }
fieldset.champ { margin: 0; padding: 0; border: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 999px; font-weight: 400; cursor: pointer; }
.choix input { width: 16px; height: 16px; accent-color: var(--accent); }
/* fichiers : une zone où glisser-déposer ou cliquer (exemple d'Alexandre, 2026-10-27); le vrai champ, invisible, la couvre */
.champ label.televerser { position: relative; display: grid; justify-items: center; gap: 2px; margin: 0; padding: 16px; border: 1.5px dashed #c6cad1; border-radius: 12px; background: #fafbfc; color: var(--pale); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.champ label.televerser:hover, .televerser.survol { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--blanc)); }
.televerser:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.televerser input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.televerser .ico { width: 22px; height: 22px; margin-bottom: 2px; color: var(--encre); stroke-width: 1.75; }
.televerser strong { font-size: 13.5px; font-weight: 600; color: var(--encre); }
.televerser span { font-size: 12px; }
.televerser-liste { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.televerser-liste li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 14px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--blanc); font-size: 13px; }
.televerser-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); }
.televerser-poids { color: var(--pale); white-space: nowrap; }
.televerser-retirer { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--pale); font-size: 22px; line-height: 1; cursor: pointer; }
.televerser-retirer:hover { background: var(--carte); color: var(--encre); }
.televerser-total { margin-top: 8px; font-size: 13px; color: var(--pale); text-align: right; }
.televerser-total.televerser-trop { padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #a1281b; text-align: left; }
.autorisation { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--texte); }
.autorisation input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.autorisation strong { display: block; font-size: 14px; font-weight: 600; color: var(--encre); }
.formulaire .envoyer { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--bouton); color: var(--sur-bouton); font-size: 15px; font-weight: 600; cursor: pointer; }
.formulaire .envoyer:hover { background: var(--bouton-fonce); }
.formulaire-notes { font-size: 12.5px; color: var(--pale); text-align: center; }
.formulaire-message { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--blanc)); color: var(--accent-fonce); font-size: 14px; text-align: center; }
.formulaire-message.formulaire-erreur { background: #fdecea; color: #a1281b; }
.formulaire .envoyer:disabled { opacity: .6; cursor: progress; }
/* adresse des travaux : suggestions de Google sous le champ (api/adresses.js) */
.champ-suggestions { position: relative; }
.suggestions { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; overflow: hidden; border: 1px solid var(--ligne); border-radius: 12px; background: var(--blanc); box-shadow: 0 12px 32px rgb(18 20 24 / .12); }
.suggestions ul { margin: 0; padding: 4px 0; list-style: none; }
.suggestions li { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: 14px; line-height: 1.35; color: var(--encre); cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--carte); }
.suggestions-source { padding: 4px 16px 8px; font-size: 11px; color: var(--pale); text-align: right; }
.adresse-hors-zone { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: #fff6e0; color: #7a4b00; font-size: 13px; line-height: 1.5; }
.adresse-hors-zone button { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* vérification anti-robots (Cloudflare Turnstile) : invisible, sauf la case à cocher quand Cloudflare a un doute */
.anti-robots { display: flex; justify-content: center; }
.anti-robots:empty { display: none; }
/* demande d'estimation envoyée : le message de la page « Merci » d'origine remplace le formulaire */
.formulaire-merci { display: grid; gap: 12px; padding: clamp(8px, 2vw, 24px) 0; text-align: center; }
.formulaire-merci h2:focus { outline: none; }
.formulaire-merci p { font-size: 16px; line-height: 1.6; color: var(--texte); }
.formulaire-merci p:nth-of-type(1) { font-size: 18px; font-weight: 600; color: var(--encre); }
.formulaire-reseaux { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.formulaire-reseaux a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--encre); border-radius: 999px; color: var(--encre); font-size: 14px; font-weight: 600; text-decoration: none; }
.formulaire-reseaux a:hover { background: var(--encre); color: var(--blanc); }

/* ---------- Pied de page ---------- */
/* pied de page : grande carte noire arrondie avec une petite marge autour, nom géant discret coupé en bas (2026-10-22) */
.pied { --marge-pied: 16px; --retrait-pied: max(16px, calc(var(--gouttiere) - var(--marge-pied))); padding: 0 var(--marge-pied) var(--marge-pied); background: var(--carte); color: rgb(255 255 255 / .72); font-size: 14.5px; }  /* même gris que la section du formulaire juste au-dessus */
.pied-carte { position: relative; isolation: isolate; overflow: hidden; padding-top: 88px; border-radius: 28px; background: var(--noir); }
.pied-carte > .cadre { position: relative; z-index: 1; max-width: calc(var(--max) + 2 * var(--retrait-pied)); padding-inline: var(--retrait-pied); }  /* garde le contenu aligné sur le reste de la page */
.pied a { text-decoration: none; }
.pied a:hover { color: var(--blanc); }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: 40px 48px; }
.pied-haut h2 { margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--blanc); }
.pied-haut p { line-height: 1.7; }
.pied-haut li a { display: inline-block; padding: 5px 0; }
.pied-logo { width: 88px; height: auto; }
.pied-trait { display: block; width: 180px; height: 1px; margin: 26px 0 22px; background: linear-gradient(90deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0)); }
.pied-marque p { max-width: 26em; }
.pied-certif { width: 200px; margin-top: 22px; }
.pied-tous { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-weight: 600; color: var(--blanc); }
.pied-tous .ico { width: 14px; height: 14px; transition: transform .2s; }
.pied-tous:hover .ico { transform: translateX(3px); }
.pied-champ { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 20px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; transition: border-color .2s; }
.pied-champ:focus-within { border-color: rgb(255 255 255 / .6); }
.pied-champ input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font-size: 14px; color: var(--blanc); outline: none; }
.pied-champ input::placeholder { color: rgb(255 255 255 / .5); }
.pied-champ button { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--bouton); font-size: 14px; font-weight: 600; color: var(--sur-bouton); cursor: pointer; transition: background-color .2s; }
.pied-champ button:hover { background: var(--bouton-fonce); }
.pied-infolettre .formulaire-message { margin-top: 10px; padding: 0; background: none; font-size: 13px; color: rgb(255 255 255 / .7); text-align: left; }
.pied-infolettre .formulaire-message.formulaire-erreur { background: none; color: #ffb4a8; }
.pied-accord { margin-top: 10px; padding-left: 20px; font-size: 12.5px; color: rgb(255 255 255 / .6); }
.pied-infolettre .anti-robots { justify-content: flex-start; margin-top: 10px; }
.pied-contact-titre { margin-top: 36px; }
.pied-tel { display: block; width: fit-content; margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--blanc); }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 13px; }
.pied-bas .legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pied-bas .legal a { display: inline-block; padding: 6px 0; }
.pied-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.langues { display: flex; gap: 2px; padding: 2px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; }
.langues a { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.langues a[aria-current] { background: rgb(255 255 255 / .14); color: var(--blanc); }
.nom-geant { position: relative; z-index: 0; width: max-content; margin: -0.42em auto -0.07em -0.045em; font-size: calc((100vw - 2 * var(--marge-pied)) / 5.6); line-height: .82; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; color: #1d1f23; pointer-events: none; user-select: none; }  /* nom géant : collé au bord gauche de la carte (demande d'Alexandre) et déborde à droite (la fin de « construction » est coupée, voulu), passe sous la barre du bas et touche le bord inférieur */
.reseaux { display: flex; gap: 8px; }
.reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); color: var(--blanc); }
.reseaux a:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.reseaux .ico { width: 16px; height: 16px; }

/* ---------- Fenêtres ---------- */
.fenetre { width: min(960px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 20px; background: var(--noir, #000); overflow: hidden; }
.fenetre::backdrop { background: rgb(0 0 0 / .8); }
.fenetre video { width: 100%; aspect-ratio: 16 / 9; }
.fenetre-fermer { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--encre); cursor: pointer; }
.fenetre-fermer .ico { width: 18px; height: 18px; }
.fenetre-texte { width: min(560px, calc(100% - 32px)); padding: 40px 32px 32px; background: var(--blanc); color: var(--texte); }
.fenetre-texte h2 { font-size: 26px; font-weight: 700; color: var(--encre); }
.fenetre-texte p { margin: 8px 0 18px; }
.fenetre-texte ul { columns: 2; column-gap: 24px; font-size: 14.5px; }
.fenetre-texte li { padding: 4px 0; break-inside: avoid; }
/* fenêtre « Zone desservie » : comme le site actuel (carte bleue deux tons à gauche, texte à droite, vague menthe) */
/* Visionneuse de photos (un clic sur une photo des pages l'ouvre en grand; js/site.js) */
.galerie a, .photos-grille a { cursor: zoom-in; }
.visionneuse { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 11 13 / .96); color: var(--blanc); }
.visionneuse::backdrop { background: rgb(10 11 13 / .96); }
.visionneuse[open] { display: grid; grid-template-rows: 72px minmax(0, 1fr) 72px; }
html:has(.visionneuse[open]) { overflow: hidden; }  /* la page ne défile pas derrière */
.visionneuse-photo { grid-row: 2; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; margin: 0; padding: 0 clamp(16px, 8vw, 112px); }
.visionneuse-photo picture { display: block; min-height: 0; height: 100%; }  /* une seule case : la photo ne dépasse jamais l'écran */
.visionneuse-photo img { width: 100%; height: 100%; object-fit: contain; }
.visionneuse-compte { position: absolute; top: 24px; left: 24px; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / .8); }
.visionneuse-bouton { position: absolute; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--blanc); cursor: pointer; transition: background-color .2s; }
.visionneuse-bouton:hover { background: rgb(255 255 255 / .26); }
.visionneuse-bouton .ico { width: 18px; height: 18px; }
.visionneuse-fermer { top: 12px; right: 16px; }
.visionneuse-prec, .visionneuse-suiv { top: 50%; margin-top: -24px; }
.visionneuse-prec { left: 16px; }
.visionneuse-prec .ico { transform: scaleX(-1); }
.visionneuse-suiv { right: 16px; }
.visionneuse-seule .visionneuse-prec, .visionneuse-seule .visionneuse-suiv, .visionneuse-seule .visionneuse-compte { display: none; }

.fenetre-zone[open] { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.fenetre-zone { width: min(780px, calc(100% - 32px)); max-height: calc(100dvh - 32px); background: var(--blanc); color: var(--texte); }
.zone-carte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }  /* même partie de la carte que le site actuel : l'est de l'île et le fleuve, pas Laval */
.zone-texte { position: relative; max-height: calc(100dvh - 32px); padding: 52px 40px 40px; overflow-y: auto; }
.zone-texte .fenetre-fermer { top: 14px; right: 14px; background: none; color: var(--marine); }
.zone-texte .fenetre-fermer .ico { width: 24px; height: 24px; }
.zone-texte .fenetre-fermer:hover { background: var(--carte); }
.zone-texte h2 { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: var(--encre); }
.zone-texte p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--encre); }
.zone-vague { display: block; width: 60px; height: 8px; margin: 20px 0 24px; fill: none; stroke: var(--menthe); stroke-width: 2; stroke-linecap: round; }
.zone-texte ul { font-size: 14.5px; line-height: 1.45; }
.zone-texte li { position: relative; padding: 2px 0 2px 18px; }
.zone-texte li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--encre); }

/* =========================================================
   iPad paysage
   ========================================================= */
@media (max-width: 1180px) {
  .menu-large-grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
  .menu-colonnes { gap: 0 12px; }
  .sous-menu .menu-vedettes .menu-specialite-liens { flex-wrap: wrap; }  /* colonne de droite plus étroite : les deux liens peuvent passer à la ligne */
  .menu-specialite-escaliers .menu-specialite-texte { max-width: 72%; }
  .nav > ul > li > a { padding: 10px 10px; }
  .avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   iPad portrait et tablettes
   ========================================================= */
@media (max-width: 1024px) {
  .cartes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .couverture-points { display: none; }  /* le rendu 3D ne garde sa place que sur grand écran */
  .bloc-points .bloc-texte { grid-template-columns: minmax(0, 1fr); }
  .bloc-points .bloc-texte > .escalier-points { grid-column: 1; grid-row: auto; justify-self: end; width: 200px; margin: 40px 24px 0 0; }  /* sous le texte, à droite : les étiquettes ont la place à gauche */
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - 88px); overflow-y: auto; margin: 0; padding: 12px var(--gouttiere) 24px; background: var(--blanc); color: var(--encre); box-shadow: 0 24px 40px -20px rgb(0 0 0 / .25); }
  .entete-ouvert { background: var(--blanc); color: var(--encre); }
  .entete-ouvert .logo .logo-blanc { display: none; }
  .entete-ouvert .logo .logo-couleur { display: block; }
  .entete-ouvert .nav { display: block; }
  .nav { align-self: auto; }
  .nav > ul { flex-direction: column; height: auto; }
  .nav > ul > li { display: block; }
  .nav > ul > li > a { padding: 12px 0; font-size: 17px; }
  .nav .ico-bas { display: none; }
  .sous-menu { position: static; min-width: 0; padding: 0 0 8px 12px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .menu-large { border: 0; box-shadow: none; }
  .menu-large-grille { display: block; padding: 0; }
  .menu-colonnes { display: block; }
  .sous-menu .groupe { padding: 12px 0 6px; font-size: 13px; }
  .groupe-ico { width: 28px; height: 28px; border-radius: 8px; }
  .ico-trait { width: 15px; height: 15px; }
  .menu-colonnes ul + .groupe { margin-top: 4px; }
  .menu-large ul a { padding: 8px 12px; font-size: 15px; }
  .menu-specialite { margin: 16px 0 8px; }
  .menu-vedettes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 8px; }
  .menu-vedettes .menu-specialite { margin: 0; }
  .menu-specialite-escaliers .menu-specialite-texte { max-width: 64%; }
  .menu-specialite .menu-specialite-rendu { inset: auto 6px 0 auto; height: 100%; }  /* reste dans la carte quand les cartes sont empilées */
  .menu-specialite-texte { padding: 24px 20px; }
  .menu-specialite-titre { font-size: 22px; }
  .menu-specialite::before { background: linear-gradient(180deg, rgb(14 15 17 / .3) 0%, rgb(14 15 17 / .82) 100%); }
  .sous-menu .menu-specialite-liens a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; }  /* cibles tactiles de 44 px */
  .menu-video-droite { display: none; }  /* téléphone et tablette : la vidéo reste au bouton lecture du haut des pages */
  .intro-grille, .carte-grise, .faq-grille, .estimation-grille { grid-template-columns: minmax(0, 1fr); }
  .couverture { min-height: 0; }
  .couverture-grille { grid-template-rows: auto; }
  .couverture-chiffres { grid-row: auto; }
  .intro-photo { max-width: 420px; }
  .entete-section { grid-template-columns: minmax(0, 1fr); }
  .entete-section .petit { justify-self: start; }
  .carte-grise { margin-right: 0; }
  .carte-permis { margin: 0; }
  .photos-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-info { grid-template-columns: minmax(0, 1fr); }
  .estimation-cote { position: static; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Téléphone
   ========================================================= */
@media (max-width: 699px) {
  .entete > .cadre { height: 76px; }
  .logo img { width: 75px; height: 46px; }
  .couverture { padding: 88px 0 20px; }
  .couverture-panneau { gap: 36px; padding-top: 8px; }
  .couverture-actions { width: 100%; }
  /* boutons du haut : texte gros, gras et centré, flèche collée au texte (choix A d'Alexandre, 2026-11-03 : « le texte
     prenait tout le bouton » sur l'ancien site; avant, 14 px collé à gauche et un grand vide bleu) */
  .couverture-actions .pilule { flex: 1 1 100%; justify-content: center; min-height: 56px; font-size: 17px; font-weight: 700; }
  .couverture-actions .pilule .rond .ico { width: 18px; height: 18px; }
  .couverture-actions .pilule-contour { flex: 1 1 0; justify-content: center; font-size: 20px; }
  .couverture-actions .pilule-contour .ico { width: 20px; height: 20px; }
  .couverture-chiffres { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; width: 100%; }
  .couverture-chiffres li { display: block; }
  .couverture-chiffres strong { font-size: 26px; }
  .couverture-chiffres span { display: block; max-width: 7em; margin-top: 6px; font-size: 12px; }
  .rond-jouer { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .rond-jouer .ico { width: 14px; height: 14px; }
  .intro-photo { max-width: none; }
  h1, .titre, .couverture h1, .autre-projet h2, .autre-projet h3 { overflow-wrap: break-word; hyphens: auto; }  /* téléphones : un mot très long (« Accompagnement ») se coupe au lieu de déborder */
  .carte-grise .titre { font-size: 24px; }
  .cartes-2, .cartes-4 { grid-template-columns: minmax(0, 1fr); }
  .photos-grille.photos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-reponse { padding-right: 0; }
  .carte-escaliers { padding-bottom: 88px; }
  .carte-escaliers p { padding-right: 0; }
  .carte-escaliers-rendu { right: 16px; bottom: -16px; width: 78px; }
  .services-bloc .petit { font-size: 15.5px; }
  .commercial-actions .pilule { flex: 1 1 100%; justify-content: space-between; }
  .commercial-actions .pilule-contour { justify-content: center; }
  .avis-grille { grid-template-columns: minmax(0, 1fr); }
  .atouts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pied { --marge-pied: 8px; }
  .pied-carte { padding-top: 56px; border-radius: 22px; }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .pied-marque, .pied-droite { grid-column: 1 / -1; }
  .pied-bas { margin-top: 40px; }
  .fenetre-texte ul { columns: 1; }
  .visionneuse-photo { padding: 0; }  /* téléphone : la photo prend toute la largeur, les flèches passent en bas */
  .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 12px; margin-top: 0; }
  .visionneuse-prec { left: calc(50% - 60px); }
  .visionneuse-suiv { right: calc(50% - 60px); }
  .fenetre-zone[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 120px auto; }
  .zone-carte img { object-position: 50% 62%; }
  .zone-texte { max-height: calc(100dvh - 32px - 120px); padding: 32px 24px 28px; }
  .zone-texte h2 { font-size: 26px; }
}

/* =========================================================
   Téléphones en portrait : bas de la couverture plus sombre (lisibilité)
   ========================================================= */
@media (max-width: 699px) {
  .couverture::before { background: linear-gradient(180deg, rgb(14 15 17 / .55) 0%, rgb(14 15 17 / .72) 45%, rgb(14 15 17 / .9) 100%); }  /* le texte prend toute la largeur : dégradé du haut vers le bas, un peu plus foncé pour lire le texte (choix B d'Alexandre, 2026-11-03) */
}

/* =========================================================
   Très petits écrans (Galaxy Fold, iPhone SE 1re gén.)
   ========================================================= */
@media (max-width: 359px) {
  .couverture-actions .pilule-contour { font-size: 16px; padding: 0 14px; }  /* le numéro tient à côté du bouton lecture */
  .famille-liste span { overflow-wrap: break-word; hyphens: auto; }  /* « Imperméabilisation » : un mot trop long pour la carte se coupe */
  .titre, .sous-titre, .carte-info h3, .carte-permis h2, .couverture h1 { overflow-wrap: break-word; hyphens: auto; }  /* très petits écrans : un mot trop long se coupe au lieu de déborder */
  .couverture h1 { font-size: 30px; }
  .titre { font-size: 26px; }
  .carte-grise { padding: 24px 20px; }
  .bloc-points .bloc-texte > .escalier-points { width: 170px; margin-right: 8px; }
  .escalier-points span { width: max-content; max-width: 9em; padding: 5px 10px; font-size: 12px; white-space: normal; text-align: right; }  /* étiquettes sur deux lignes : elles tiennent à gauche de l'escalier */
  .couverture-chiffres { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .couverture-chiffres li { display: flex; align-items: baseline; gap: 10px; }
  .couverture-chiffres span { max-width: none; margin-top: 0; }
}

/* =========================================================
   Téléphones en paysage (écran bas) : la couverture tient dans l'écran
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .entete > .cadre { height: 64px; }
  .logo img { width: 62px; height: 38px; }
  .couverture { padding: 72px 0 20px; }
  .couverture h1 { margin-top: 16px; font-size: 30px; }
  .couverture-panneau { gap: 28px; }
  .couverture-actions .pilule { min-height: 44px; }
}

/* ---------- Cartes des familles de services (accueil et page Services) : les cartes du site actuel, telles quelles
   (mesures relevées sur www.entreprisescam.com, choix d'Alexandre 2026-10-22) : photo, carte blanche à ombre qui la
   chevauche, liste à chevrons ---------- */
.familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px clamp(32px, 4vw, 48px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.famille-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.famille-carte { position: relative; z-index: 1; margin: -70px clamp(32px, 4.2vw, 60px) 0 0; padding: 30px; border-radius: 10px; background: var(--blanc); box-shadow: 0 0 56px 2px rgb(0 0 0 / .18); }
.famille-carte h3 { margin-bottom: 18px; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.08; font-weight: 700; letter-spacing: -0.7px; color: var(--encre); }
.famille-liste a { display: flex; align-items: center; gap: 16px; padding: 3px 0; font-size: 15px; line-height: 22.5px; font-weight: 600; color: var(--texte); text-decoration: none; transition: color .2s; }
.famille-liste .ico { flex: none; width: 18px; height: 18px; color: var(--marine); }
.famille-liste a:hover { color: var(--accent); }
@media (pointer: coarse) { .famille-liste a { min-height: 44px; } }  /* écrans tactiles : cibles de 44 px */
.familles-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* page Services : deux par rangée, comme la page actuelle */
@media (max-width: 1024px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .familles { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .famille-carte { margin-right: 32px; padding: 24px; }
  .famille-carte h3 { font-size: 24px; line-height: 28px; }
}

/* ---------- Réalisations semblables : 3 grandes cartes photo, titre et bouton sur la photo (comme la page d'origine) ---------- */
/* partage (courriel, Facebook, Pinterest) : fiches réalisation et articles du blogue */
.partage { display: flex; gap: 10px; margin-left: auto; }  /* à droite, même sans titre (pages anglaises), comme l'original */
.partage a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--blanc); transition: background-color .2s; }
.partage a:hover { background: var(--accent-fonce); }
.partage .ico { width: 20px; height: 20px; }
.autres-projets { padding: var(--espace) 0; }
/* pages de services : après la carte grise (ou un bloc), un seul espace entre les sections, pas deux (Alexandre, 2026-11-02) */
.commercial + .autres-projets { padding-top: 0; }
.bloc + .autres-projets { padding-top: calc(var(--espace) - var(--espace-blocs)); }
.autres-sous { margin-top: 8px; font-size: 17px; color: var(--texte); }
.autres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: var(--espace-tete); }
.autre-projet { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 400px; height: 100%; padding: clamp(24px, 2.6vw, 36px); overflow: hidden; border-radius: var(--rayon); color: var(--blanc); text-decoration: none; }
.autre-projet-photo, .autre-projet-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.autre-projet-photo img { object-fit: cover; transition: transform .5s; }
.autre-projet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(14 15 17 / .1) 0%, rgb(14 15 17 / .35) 40%, rgb(14 15 17 / .82) 100%); }
.autre-projet:hover .autre-projet-photo img { transform: scale(1.04); }
.autre-projet h2, .autre-projet h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.autre-projet p { margin-top: 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.autre-projet .pilule { margin-top: 20px; }
.autre-projet:hover .pilule { background: var(--bouton-fonce); }
.autre-projet:hover .pilule .rond { transform: translateX(3px); }
@media (max-width: 1024px) { .autres-grille { grid-template-columns: minmax(0, 1fr); } .autre-projet { min-height: 340px; } }
@media (max-width: 699px) { .autre-projet { min-height: 300px; } }

/* ---------- Listes à crochets des pages de l'ancien modèle (2019 : descente de sous-sol, muret, drain français…) ---------- */
.coches { display: grid; gap: 10px; margin-top: 20px; }
.coches li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--texte); }
.coches .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); stroke-width: 3; }
.coches a { display: inline-block; margin: -10px 0; padding: 10px 0; font-weight: 600; color: var(--accent); text-decoration: none; }  /* zone de clic plus haute que le texte (doigt) */
.coches a:hover { text-decoration: underline; }
.carte-permis .coches li { font-size: 16px; font-weight: 600; color: var(--encre); }
.coches + .texte, .coches + .bloc-actions { margin-top: 20px; }

/* ---------- Témoins (Loi 25, 2026-10-27) : bandeau mince en bas de l'écran (choix D d'Alexandre), panneau « Choisir »,
   lien « Gérer mes témoins » dans le pied de page. Refuser est aussi visible qu'accepter. ---------- */
.temoins { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; border-top: 1px solid var(--ligne); background: var(--blanc); box-shadow: 0 -12px 30px -18px rgb(0 0 0 / .25); color: var(--encre); font-size: 13.5px; line-height: 1.5; }
.temoins[hidden] { display: none; }
.temoins .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 12px; padding-bottom: 12px; }
.temoins p { margin: 0; }
.temoins a, .temoins-boite a { font-weight: 600; color: var(--accent); }
.temoins-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.temoins-boutons button { min-height: 44px; padding: 0 18px; border: 1px solid var(--encre); border-radius: 999px; background: var(--blanc); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--encre); cursor: pointer; }
.temoins-boutons button:hover { background: var(--carte); }
.temoins-boutons button.plein { background: var(--encre); color: var(--blanc); }
.temoins-boutons button.plein:hover { background: #2a2d33; }
.temoins-panneau { width: min(560px, calc(100% - 32px)); background: var(--blanc); }
.temoins-boite { position: relative; display: block; max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; color: var(--texte); font-size: 14.5px; line-height: 1.55; }
.temoins-boite h2 { padding-right: 48px; font-size: 22px; font-weight: 700; color: var(--encre); }
.temoins-boite > p { margin: 8px 0 14px; }
.temoins-boite > .temoins-gpc { padding: 10px 14px; border-radius: 12px; background: var(--carte); font-size: 14px; color: var(--encre); }
.temoins-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ligne); cursor: pointer; }
div.temoins-cat { cursor: default; }
.temoins-nom { font-weight: 700; color: var(--encre); }
.temoins-desc { grid-column: 1; font-size: 13.5px; }
.temoins-toujours { grid-row: 1; grid-column: 2; font-size: 12.5px; font-weight: 600; color: var(--pale); }
.bascule { grid-row: 1 / span 2; grid-column: 2; appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: #c9cdd3; cursor: pointer; transition: background-color .2s; }
.bascule::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .2s; }
.bascule:checked { background: var(--accent); }
.bascule:checked::after { left: 21px; }
.temoins-boite .temoins-boutons { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.pied-bas .lien-temoins { padding: 6px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pied-bas .lien-temoins:hover { text-decoration: underline; }
@media (max-width: 699px) {
  .temoins .temoins-boutons { width: 100%; }
  .temoins .temoins-boutons button { flex: 1 1 0; padding: 0 10px; }
  .temoins-boite .temoins-boutons button { flex: 1 1 auto; }
}

/* Dernières publications Instagram (accueil, page « Planifiez vos travaux ») : js/site.js les met à jour */
.reels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 48px); }
.reels a { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--ligne); }
.reels img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; transition: transform .4s; }
.reels a:hover img { transform: scale(1.04); }
@media (max-width: 1024px) {
  .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
  .reels li { flex: 0 0 42%; scroll-snap-align: start; }
}