/* ==========================================================================
   TIMOPHOROS — système graphique « maison » (refonte V1, octobre 2026)
   Un seul système pour les deux univers : Photographie,
   Web & intelligence artificielle. La couleur vient des photographies ;
   l'interface reste neutre (sel, nuit d'étang) avec un seul accent : le bleu étang.
   Mise en page : grille à 12 colonnes, texte aligné à gauche, grands vides.
   ========================================================================== */

/* Polices auto-hébergées (licence SIL OFL, voir assets/fonts/LICENCES-OFL.txt) */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-var-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(../fonts/newsreader-italic-var-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/ibm-plex-sans-var-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2")}

:root{
  /* Couleur */
  --sel:#eef0ec;          /* fond : sel de l'étang, blanc froid */
  --sel-2:#e1e6e1;        /* surfaces, zones calmes */
  --nuit:#172024;         /* texte, bandeaux sombres */
  --brume:#4b585d;        /* texte secondaire (6,4:1 sur sel) */
  --etang:#22586a;        /* teinte « Web & IA » : bleu de l'étang (6,8:1 sur sel) */
  --sagne:#7f5530;        /* teinte « Photographie » : ocre des roseaux de sagne (5,6:1 sur sel) */
  --succes:#2e6b43;       /* confirmation d'envoi (5,5:1) */
  --teinte:var(--etang);  /* teinte du parcours en cours ; redéfinie par [data-univers] */
  --ligne:rgba(23,32,36,.16);
  --voile:rgba(238,240,236,.86);
  --sur-photo:#f4f6f3;    /* texte posé sur photographie (toujours clair) */
  --manque:#7a4a6e;       /* contenus manquants, à fournir : prune, distincte des deux teintes */
  /* Typographie */
  --titre:"Newsreader",Georgia,"Times New Roman",serif;
  --texte:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --donnee:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Échelle typographique : quarte (×1,333) sur une base de 17 px */
  --t-0:.875rem; --t-1:1.0625rem; --t-2:1.417rem; --t-3:1.889rem; --t-4:2.519rem; --t-5:3.358rem; --t-6:4.477rem;
  /* Espacement : trame de 8 px */
  --e-1:8px; --e-2:16px; --e-3:24px; --e-4:40px; --e-5:64px; --e-6:104px;
  --bord:calc(max(0px,(100vw - var(--largeur) - 2*var(--marge)) / 2) + max(var(--marge),var(--gout)));
  --t-affiche:clamp(2.6rem,7.4vw,6.4rem);
  /* Espace */
  --gout:max(16px,env(safe-area-inset-left,0px));
  --goutd:max(16px,env(safe-area-inset-right,0px));
  --marge:clamp(20px,4vw,56px);
  --section:clamp(72px,11vw,168px);
  --largeur:1320px;
  /* Mouvement */
  --doux:cubic-bezier(.22,.8,.24,1);
  --duree:.5s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sel:#11181b;--sel-2:#1a2327;--nuit:#e8ece8;--brume:#a5b1b4;--etang:#8cc4d6;
  --ligne:rgba(232,236,232,.16);--voile:rgba(17,24,27,.86);--manque:#d6a6c9;--sagne:#dcae7c;--succes:#8fd1a5;color-scheme:dark}}
:root[data-theme="dark"]{
  --sel:#11181b;--sel-2:#1a2327;--nuit:#e8ece8;--brume:#a5b1b4;--etang:#8cc4d6;
  --ligne:rgba(232,236,232,.16);--voile:rgba(17,24,27,.86);--manque:#d6a6c9;--sagne:#dcae7c;--succes:#8fd1a5;color-scheme:dark}

/* Transitions entre pages (navigateurs compatibles uniquement) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s var(--doux) both vt-sortie}
::view-transition-new(root){animation:.42s var(--doux) both vt-entree}
@keyframes vt-sortie{to{opacity:0}}
@keyframes vt-entree{from{opacity:0;transform:translateY(10px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px;scroll-behavior:smooth}
body{margin:0;background:var(--sel);color:var(--nuit);font:400 var(--t-1)/1.6 var(--texte);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--etang);outline-offset:3px}
h1,h2,h3{font-family:var(--titre);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance;font-optical-sizing:auto}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

.passer{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--nuit);color:var(--sel);border-radius:4px}
.passer:focus{top:calc(12px + env(safe-area-inset-top,0px))}
[hidden]{display:none!important}
.visuellement-masque{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Cadre */
.cadre{width:100%;max-width:calc(var(--largeur) + 2*var(--marge));margin-inline:auto;
  padding-left:max(var(--marge),var(--gout));padding-right:max(var(--marge),var(--goutd))}
.section{padding-block:var(--section)}
.section + .section{padding-top:0}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(28px,4vw,56px)}

/* En-tête */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--voile);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--ligne)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.marque{display:inline-flex;align-items:baseline;gap:.5em;text-decoration:none;font:500 1.06rem/1 var(--titre);letter-spacing:.14em}
.marque small{font:400 .78rem/1 var(--texte);letter-spacing:0;color:var(--brume)}
.nav-principale{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-principale a{text-decoration:none;font-size:.95rem;padding-block:8px;position:relative}
.nav-principale a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--doux)}
.nav-principale a:hover::after,.nav-principale a[aria-current="page"]::after{transform:scaleX(1)}
.nav-principale .bouton{padding:10px 16px}
.nav-principale .bouton::after{display:none}
.menu-bouton{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:500 .95rem var(--texte);cursor:pointer}
.menu-bouton span{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
@media (max-width:880px){
  .nav-principale{display:none}
  .menu-bouton{display:inline-flex}
  .entete[data-ouvert] .nav-principale{display:flex;position:fixed;inset:68px 0 0 0;flex-direction:column;align-items:flex-start;gap:0;
    padding:24px max(var(--marge),var(--goutd)) calc(32px + env(safe-area-inset-bottom,0px)) max(var(--marge),var(--gout));background:var(--sel);overflow:auto}
  .entete[data-ouvert] .nav-principale a{font:400 var(--t-4)/1.1 var(--titre);padding-block:14px;width:100%;border-bottom:1px solid var(--ligne)}
  .entete[data-ouvert] .nav-principale .bouton{margin-top:24px;font:500 1rem var(--texte);border-bottom:0;width:auto}
  .entete[data-ouvert] .menu-bouton span{box-shadow:none;transform:rotate(45deg)}
  .entete[data-ouvert] .menu-bouton span::after{content:"";display:block;height:1px;background:currentColor;transform:rotate(-90deg)}
}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:.7em;min-height:48px;padding:12px 22px;border-radius:999px;
  background:var(--nuit);color:var(--sel);text-decoration:none;font:500 .98rem/1.2 var(--texte);border:1px solid var(--nuit);
  transition:background .3s var(--doux),color .3s var(--doux)}
.bouton:hover{background:var(--etang);border-color:var(--etang);color:var(--sel)}
.bouton.secondaire{background:transparent;color:var(--nuit)}
.bouton.secondaire:hover{background:var(--nuit);color:var(--sel);border-color:var(--nuit)}
.bouton.clair{background:var(--sur-photo);color:#172024;border-color:var(--sur-photo)}
.bouton.clair:hover{background:transparent;color:var(--sur-photo)}
.bouton svg{width:14px;height:14px;transition:transform .35s var(--doux)}
.bouton:hover svg{transform:translateX(3px)}
.lien-fort{display:inline-flex;align-items:center;gap:.5em;color:var(--etang);font-weight:500;text-decoration:underline}

/* Typographie de lecture */
.surtitre{font:400 var(--t-0)/1.4 var(--texte);color:var(--brume);margin-bottom:18px}
.affiche{font-size:var(--t-affiche);line-height:.96;letter-spacing:-.035em}
.h-section{font-size:clamp(2rem,4.6vw,var(--t-5));line-height:1.02}
.h-bloc{font-size:clamp(1.5rem,2.6vw,var(--t-3));line-height:1.12}
.chapeau{font:300 clamp(1.08rem,1.6vw,1.3rem)/1.55 var(--texte);color:var(--brume);max-width:58ch}
.prose{max-width:64ch;display:grid;gap:1.1em}
.prose p{font-size:1.06rem;line-height:1.7}
.donnee{font-family:var(--texte);font-weight:500;font-size:.95rem;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}

/* ---------- L'obturateur (accueil) ---------- */
.obturateur{--pos:50%;position:relative;height:clamp(480px,74svh,780px);overflow:hidden;background:#172024;color:var(--sur-photo);isolation:isolate;touch-action:pan-y}
.obturateur picture,.obturateur img{position:absolute;inset:0;width:100%;height:100%}
.obturateur img{object-fit:cover;object-position:50% 58%}
.obt-plan{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos));z-index:1}
.obt-plan img{filter:grayscale(1) contrast(1.05) brightness(.5)}
.obt-plan .maquette{position:absolute;inset:0;width:100%;height:100%}
.maquette rect,.maquette line{fill:none;stroke:rgba(244,246,243,.62);stroke-width:1;vector-effect:non-scaling-stroke}
.maquette .trame line{stroke:rgba(140,196,214,.22)}
.maquette .plein{fill:rgba(140,196,214,.14);stroke:#8cc4d6}
.maquette text{fill:#cfe6ee;font:400 13px var(--donnee)}
.obt-couture{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:1px;background:var(--sur-photo);pointer-events:none;box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
.obt-couture::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:1px solid var(--sur-photo);background:rgba(23,32,36,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.obt-couture::before{content:"";position:absolute;top:50%;left:50%;width:14px;height:6px;margin:-3px 0 0 -7px;z-index:1;
  background:linear-gradient(90deg,var(--sur-photo) 0 2px,transparent 2px 12px,var(--sur-photo) 12px)}
.obt-curseur{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.obt-curseur::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100vh}
.obt-curseur::-moz-range-thumb{width:64px;height:100vh;border:0;background:transparent}
.obturateur:has(.obt-curseur:focus-visible) .obt-couture::after{outline:2px solid #8cc4d6;outline-offset:4px}
.obt-ombre{position:absolute;inset:auto 0 0 0;height:62%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(14,20,23,.82),rgba(14,20,23,0))}
.obt-titre{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;padding-block:0 clamp(26px,5vw,56px)}
.obt-titre h1{font-size:clamp(2.3rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.035em;max-width:13ch;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.obt-titre p{margin-top:14px;max-width:46ch;color:rgba(244,246,243,.86);font:300 clamp(1rem,1.5vw,1.18rem)/1.5 var(--texte)}
.obt-cotes{position:absolute;top:clamp(18px,3vw,32px);left:0;right:0;z-index:4;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.obt-cote{font:400 .82rem/1.3 var(--texte);color:rgba(244,246,243,.9);transition:opacity .3s}
.obt-cote b{display:block;font:400 1.12rem/1.2 var(--titre)}
.obt-cote.droite{text-align:right}
.obt-aide{font:400 .78rem var(--texte);color:rgba(244,246,243,.72);margin-top:16px}
@media (max-width:640px){.obturateur{height:max(600px,86svh)}.obt-titre h1{max-width:11ch}.obt-titre p:not(.obt-aide){font-size:.98rem}}

/* ---------- Les deux univers ---------- */
.univers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ligne)}
.porte{display:grid;grid-template-rows:auto 1fr auto;gap:28px;padding:clamp(32px,5vw,64px) clamp(0px,3vw,48px) clamp(32px,5vw,64px) 0}
.porte + .porte{border-left:1px solid var(--ligne);padding-left:clamp(20px,4vw,64px);padding-right:0}
.porte-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.porte h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1}
.porte-signe{width:56px;height:56px;flex:none;color:var(--etang)}
.porte-liste{display:grid;border-top:1px solid var(--ligne)}
.porte-liste > li > a,.porte-liste > li > span{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ligne);text-decoration:none}
.porte-liste a:hover .nom{color:var(--etang)}
.porte-liste .nom{transition:color .25s}
.porte-liste .donnee{color:var(--brume);white-space:nowrap}
.porte .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:820px){.univers{grid-template-columns:1fr}.porte,.porte + .porte{border-left:0;padding-inline:0}.porte + .porte{border-top:1px solid var(--ligne)}}

/* ---------- Bandeau photographique pleine largeur ---------- */
.bandeau{position:relative;min-height:clamp(380px,62svh,720px);display:flex;align-items:flex-end;color:var(--sur-photo);overflow:hidden;isolation:isolate;background:#172024}
.bandeau picture,.bandeau img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.bandeau img{object-fit:cover}
.bandeau::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,20,23,.84) 0%,rgba(14,20,23,.42) 58%,rgba(14,20,23,.3))}
.bandeau .cadre{padding-block:clamp(36px,6vw,80px)}
.bandeau .surtitre{color:rgba(244,246,243,.8)}
.bandeau .chapeau{color:rgba(244,246,243,.86)}
.fil{font-size:.85rem;color:rgba(244,246,243,.78);margin-bottom:22px}
.fil a{color:inherit}
.fil.sombre{color:var(--brume)}

/* ---------- Introduction d'univers ---------- */
.ouverture{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,40px);align-items:end;padding-block:clamp(48px,8vw,120px) clamp(40px,6vw,88px)}
.ouverture .gauche{grid-column:1 / span 7}
.ouverture .droite{grid-column:9 / span 4;display:grid;gap:20px}
@media (max-width:820px){.ouverture .gauche,.ouverture .droite{grid-column:1 / -1}}

/* ---------- Prestations (lignes) ---------- */
.groupe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px clamp(16px,2.4vw,32px);padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--ligne)}
.groupe > header{grid-column:1 / span 4;display:grid;gap:12px;align-content:start}
.groupe > .lignes{grid-column:6 / -1}
@media (max-width:900px){.groupe > header,.groupe > .lignes{grid-column:1 / -1}}
.ligne-presta{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ligne);text-decoration:none}
.ligne-presta:first-child{border-top:1px solid var(--ligne)}
.ligne-presta .vignette{width:96px;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--sel-2)}
.ligne-presta .vignette img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--doux)}
.ligne-presta:hover .vignette img{transform:scale(1.06)}
.ligne-presta .vignette.cadre-visage img{object-position:50% 25%}
.ligne-presta h3{font-size:1.45rem;line-height:1.15}
.ligne-presta p{color:var(--brume);font-size:.95rem;margin-top:4px}
.ligne-presta .prix{text-align:right;white-space:nowrap}
.ligne-presta .prix small{display:block;font:400 .78rem var(--texte);color:var(--brume)}
a.ligne-presta:hover h3{color:var(--etang)}
@media (max-width:560px){.ligne-presta{grid-template-columns:72px minmax(0,1fr);row-gap:6px}.ligne-presta .vignette{width:72px}.ligne-presta .prix{grid-column:2;text-align:left}}

/* ---------- Réalisations (liste) ---------- */
.projets{border-top:1px solid var(--nuit)}
.projet{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--ligne);text-decoration:none;position:relative}
.projet :is(h2,h3){font-size:clamp(1.7rem,4.2vw,3.3rem);line-height:1.02;letter-spacing:-.03em;transition:transform .45s var(--doux),color .3s}
.projet .meta{color:var(--brume);font-size:.92rem;text-align:right}
.projet .vignette{display:none}
@media (hover:hover) and (pointer:fine){.projets:hover .projet :is(h2,h3){color:var(--brume)}.projets .projet:hover h3{color:var(--nuit);transform:translateX(12px)}}
@media (max-width:640px){.projet{grid-template-columns:88px minmax(0,1fr);align-items:center;column-gap:16px}.projet .vignette{display:block;grid-row:1 / span 2;width:88px;aspect-ratio:1;overflow:hidden}.projet .vignette img{width:100%;height:100%;object-fit:cover}.projet .meta{text-align:left;grid-column:2}}
.apercu-flottant{position:fixed;left:0;top:0;z-index:30;width:clamp(220px,22vw,340px);aspect-ratio:4/5;pointer-events:none;overflow:hidden;border-radius:2px;
  opacity:0;transform:translate3d(-999px,-999px,0) scale(.92);transition:opacity .25s,scale .35s var(--doux);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.apercu-flottant img{width:100%;height:100%;object-fit:cover}
.apercu-flottant.visible{opacity:1;scale:1.087}

/* ---------- Fiche de réalisation ---------- */
.fiche{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px clamp(16px,2.4vw,32px);padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--ligne)}
.fiche .visuel{grid-column:1 / span 6}
.fiche .visuel img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.fiche .texte{grid-column:8 / -1;display:grid;gap:24px;align-content:start}
.fiche:nth-of-type(even) .visuel{grid-column:7 / -1;order:2}
.fiche:nth-of-type(even) .texte{grid-column:1 / span 5;order:1}
.fiche dl{display:grid;gap:18px;margin:0}
.fiche dt{font-size:.85rem;color:var(--brume);margin-bottom:4px}
.fiche dd{margin:0;line-height:1.6}
.etiquette{justify-self:start;display:inline-block;font-size:.8rem;padding:4px 10px;border:1px solid var(--ligne);border-radius:999px;color:var(--brume)}
@media (max-width:820px){.fiche .visuel,.fiche .texte,.fiche:nth-of-type(even) .visuel,.fiche:nth-of-type(even) .texte{grid-column:1 / -1;order:0}}

/* ---------- Contenus manquants (signalés, jamais inventés) ---------- */
.manque{display:grid;gap:8px;align-content:center;padding:clamp(20px,3vw,32px);min-height:180px;border:1.5px dashed var(--manque);border-radius:2px;color:var(--nuit);
  background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--manque) 7%,transparent) 12px 13px)}
.manque strong{font:500 .82rem/1.3 var(--texte);color:var(--manque)}
.manque p{font-size:.95rem;color:var(--brume);max-width:52ch}
.manque.portrait{aspect-ratio:4/5;min-height:0}
.manque.paysage{min-height:clamp(180px,22vw,280px)}

/* ---------- Récit (prestation) ---------- */
.recit{display:grid;gap:clamp(56px,9vw,120px)}
.etape{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px clamp(16px,2.4vw,32px);align-items:center}
.etape .num{grid-column:1 / span 1;font:400 var(--t-0) var(--donnee);color:var(--brume);align-self:start;padding-top:12px}
.etape .corps{grid-column:2 / span 5;display:grid;gap:14px}
.etape .image{grid-column:8 / -1}
.etape:nth-child(even) .corps{grid-column:7 / -1;order:2}
.etape:nth-child(even) .num{grid-column:6 / span 1;order:1}
.etape:nth-child(even) .image{grid-column:1 / span 5;order:0}
.etape .image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.etape .legende{font-size:.82rem;color:var(--brume);margin-top:10px}
@media (max-width:820px){.etape .num,.etape .corps,.etape .image,.etape:nth-child(even) .num,.etape:nth-child(even) .corps,.etape:nth-child(even) .image{grid-column:1 / -1;order:0}.etape .num{padding:0}}

/* Diptyque */
.diptyque{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(10px,1.6vw,20px);align-items:end}
.diptyque img{width:100%;object-fit:cover;border-radius:2px}
.diptyque figure{margin:0}
.diptyque figure:first-child img{aspect-ratio:4/3}
.diptyque figure:last-child img{aspect-ratio:4/5}
.diptyque figcaption{font-size:.82rem;color:var(--brume);margin-top:10px}
@media (max-width:560px){.diptyque{grid-template-columns:1fr}}

/* ---------- Formules ---------- */
.formules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--nuit)}
.formule{display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;padding:28px clamp(14px,1.8vw,24px) 32px;border-right:1px solid var(--ligne)}
.formule:first-child{padding-left:0}
.formule:last-child{border-right:0;padding-right:0}
.formule h3{font-size:1.65rem}
.formule .accroche{color:var(--brume);font-size:.95rem;margin-top:6px}
.formule .montant{font:500 1.4rem/1.2 var(--texte);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.formule .montant small{font:400 .8rem var(--texte);color:var(--brume);margin-left:6px}
.formule ul{display:grid;gap:9px;font-size:.95rem}
.formule li{padding-left:18px;position:relative}
.formule li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--etang)}
.formule.repere{background:var(--sel-2);padding-left:clamp(14px,1.8vw,24px)}
.formule .marque-repere{font-size:.8rem;color:var(--etang);font-weight:500}
@media (max-width:1040px){.formules{grid-template-columns:repeat(2,minmax(0,1fr))}.formule{border-bottom:1px solid var(--ligne)}.formule:nth-child(2n){border-right:0}.formule:nth-child(odd){padding-left:0}.formule.repere{padding-left:clamp(14px,1.8vw,24px)}}
@media (max-width:620px){.formules{grid-template-columns:1fr}.formule,.formule:nth-child(odd){border-right:0;padding-inline:0}.formule.repere{padding-inline:16px}}

/* ---------- Questions ---------- */
.questions{border-top:1px solid var(--ligne)}
.questions details{border-bottom:1px solid var(--ligne)}
.questions summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font:400 1.3rem/1.3 var(--titre)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";flex:none;width:12px;height:12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--doux)}
.questions details[open] summary::after{transform:rotate(225deg)}
.questions details p{padding:0 0 22px;max-width:64ch;color:var(--brume)}

/* ---------- Appel final ---------- */
.appel{background:var(--nuit);color:var(--sel)}
.appel .cadre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;padding-block:clamp(64px,10vw,140px);align-items:end}
.appel h2{grid-column:1 / span 8;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1}
.appel .droite{grid-column:9 / -1;display:grid;gap:18px}
.appel p{color:color-mix(in srgb,var(--sel) 78%,transparent)}
.appel .bouton{background:var(--sel);color:var(--nuit);border-color:var(--sel);justify-self:start}
.appel .bouton:hover{background:transparent;color:var(--sel)}
@media (max-width:820px){.appel h2,.appel .droite{grid-column:1 / -1}}

/* ---------- Portrait / à propos ---------- */
.personne{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px clamp(16px,2.4vw,32px);align-items:start}
.personne .photo{grid-column:1 / span 5;position:sticky;top:100px}
.personne .texte{grid-column:7 / -1;display:grid;gap:40px}
@media (max-width:820px){.personne .photo,.personne .texte{grid-column:1 / -1;position:static}}
.principes{display:grid;gap:0;border-top:1px solid var(--ligne)}
.principes li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--ligne)}
.principes h3{font-size:1.3rem}
.principes p{color:var(--brume)}
@media (max-width:560px){.principes li{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px clamp(16px,2.4vw,32px)}
.contact-grille .intro{grid-column:1 / span 5;display:grid;gap:22px;align-content:start}
.contact-grille form{grid-column:7 / -1}
@media (max-width:860px){.contact-grille .intro,.contact-grille form{grid-column:1 / -1}}
.formulaire{display:grid;gap:22px}
.choix-univers{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin:0}
.choix-univers legend{font-size:.9rem;margin-bottom:10px;padding:0}
.choix-univers label{display:grid;gap:4px;padding:16px;border:1px solid var(--ligne);border-radius:4px;cursor:pointer;transition:border-color .2s,background .2s}
.choix-univers label b{font:400 1.15rem/1.2 var(--titre)}
.choix-univers label span{font-size:.85rem;color:var(--brume)}
.choix-univers input{position:absolute;opacity:0;pointer-events:none}
.choix-univers label:has(input:checked){border-color:var(--etang);background:color-mix(in srgb,var(--etang) 9%,transparent);box-shadow:inset 0 0 0 1px var(--etang)}
.choix-univers label:has(input:focus-visible){outline:2px solid var(--etang);outline-offset:2px}
@media (max-width:480px){.choix-univers{grid-template-columns:1fr}}
.champ{display:grid;gap:8px}
.champ label{font-size:.9rem}
.champ input,.champ textarea,.champ select{width:100%;font:400 1rem/1.45 var(--texte);color:var(--nuit);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--nuit) 45%,transparent);border-radius:0;padding:10px 0;transition:border-color .2s}
.champ textarea{min-height:120px;resize:vertical;border:1px solid color-mix(in srgb,var(--nuit) 45%,transparent);padding:12px;border-radius:2px}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--etang);box-shadow:0 1px 0 var(--etang)}
.champ [aria-invalid="true"]{border-color:#b3261e}
.erreur{font-size:.85rem;color:#b3261e}
:root[data-theme="dark"] .erreur{color:#ff9a8f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .erreur{color:#ff9a8f}}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:520px){.deux-champs{grid-template-columns:1fr}}
.accord{display:flex;gap:12px;align-items:flex-start;font-size:.92rem}
.accord input{width:20px;height:20px;margin-top:2px;accent-color:var(--etang);flex:none}
.mention{font-size:.82rem;color:var(--brume)}
.statut{min-height:1.5em;font-weight:500}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.adresse{font:400 1.2rem var(--titre)}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--ligne);padding-block:clamp(48px,7vw,88px) calc(28px + env(safe-area-inset-bottom,0px))}
.pied .haut{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px clamp(16px,2.4vw,32px)}
.pied .signature{grid-column:1 / span 4;display:grid;gap:12px;align-content:start}
.pied .signature .marque{font-size:1.25rem}
.pied nav{grid-column:span 2;display:grid;gap:10px;align-content:start;font-size:.95rem}
.pied nav h2{font:400 .85rem var(--texte);color:var(--brume);margin-bottom:6px}
.pied nav a{text-decoration:none}
.pied nav a:hover{text-decoration:underline}
.pied .bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:56px;font-size:.82rem;color:var(--brume)}
.pied .bas a{color:inherit}
@media (max-width:900px){.pied .signature{grid-column:1 / -1}.pied nav{grid-column:span 6}}

/* ---------- Utilitaires ---------- */
.titre-rangee{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(28px,4vw,48px)}
.note{font-size:.88rem;color:var(--brume);max-width:64ch}
.pile{display:grid;gap:20px}


/* Maquette révélée par l'obturateur : la photographie devient une page */
.obt-plan .trame{position:absolute;inset:0;background-image:linear-gradient(rgba(140,196,214,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(140,196,214,.16) 1px,transparent 1px);background-size:calc(100% / 12) 48px;background-position:0 0}
.wf{position:absolute;right:max(var(--marge),var(--goutd));top:clamp(76px,12%,120px);width:min(44%,520px);bottom:clamp(150px,30%,260px);border:1px solid rgba(244,246,243,.7);border-radius:6px;display:grid;grid-template-rows:auto 1fr;background:rgba(14,20,23,.25)}
.wf-barre{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(244,246,243,.4);font:400 11px var(--donnee);color:#cfe6ee}
.wf-barre i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(244,246,243,.7)}
.wf-barre span{margin-left:8px}
.wf-corps{display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(8px,1.6vh,14px);padding:clamp(10px,2vw,22px)}
.wf span{font:400 11px var(--donnee);color:#cfe6ee}
.wf-titre{height:clamp(26px,5vh,46px);border:1px dashed rgba(140,196,214,.9);display:flex;align-items:center;padding-inline:8px}
.wf-lignes{display:grid;gap:6px}
.wf-lignes i{display:block;height:6px;background:rgba(244,246,243,.32);border-radius:3px}
.wf-image{border:1px solid #8cc4d6;background:rgba(140,196,214,.12);display:flex;align-items:flex-start;padding:6px 8px;min-height:40px}
.wf-pied{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.wf-bouton{border:1px solid #f4f6f3;border-radius:999px;padding:4px 12px}
.wf-bulle{border:1px solid rgba(140,196,214,.9);border-radius:10px 10px 2px 10px;padding:4px 10px}
@media (max-width:640px){.wf{width:auto;left:calc(var(--pos) + 12px);right:12px;top:112px;bottom:auto;height:min(34svh,230px)}.wf-bulle,.wf-lignes,.wf-titre{display:none}.wf-corps{grid-template-rows:1fr auto}}

/* Échange agent (exemple publié) */
.echange{display:grid;gap:12px;align-content:start;padding:clamp(20px,3vw,36px);background:var(--sel-2);border-radius:4px}
.bulle{max-width:30ch;padding:12px 16px;border-radius:16px;line-height:1.45}
.bulle.visiteur{justify-self:end;background:var(--nuit);color:var(--sel);border-bottom-right-radius:4px}
.bulle.agent{justify-self:start;background:var(--sel);border:1px solid var(--ligne);border-bottom-left-radius:4px}
.ligne-presta.sans{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:560px){.ligne-presta.sans{grid-template-columns:1fr}.ligne-presta.sans .prix{grid-column:1}}

/* Déroulé numéroté (étapes réelles) */
.deroule{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--nuit);counter-reset:d}
.deroule li{padding:24px clamp(10px,1.6vw,22px) 0 0;display:grid;gap:10px;align-content:start}
.deroule .donnee{color:var(--etang)}
.deroule h3{font-size:1.35rem}
.deroule p{color:var(--brume);font-size:.95rem}
@media (max-width:900px){.deroule{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:520px){.deroule{grid-template-columns:1fr}}
.credit{position:absolute;right:max(var(--marge),var(--goutd));bottom:14px;font-size:.75rem;color:rgba(244,246,243,.74);z-index:1}

.col-g{grid-column:1 / span 5}.col-d{grid-column:7 / -1}.col-g4{grid-column:1 / span 4}.col-d6{grid-column:6 / -1}.col-plein{grid-column:1 / -1}
@media (max-width:820px){.col-g,.col-d,.col-g4,.col-d6{grid-column:1 / -1}}
.section.fond{background:var(--sel-2);padding-top:var(--section)}


/* Compatibilité avec le widget Tim (agent.css attend les variables de site.css).
   Valeurs fixes : le panneau de Tim reste clair dans les deux thèmes. */
body{--paper:#dfe3df;--paper-2:#f4f5f2;--ink:#121719;--soft:#3f4744;--muted:#5a625e;--line:rgba(18,23,25,.17);
  --blue:#2a6479;--white:#f8f9f6;--sans:var(--texte);--mono:var(--donnee);--serif:var(--titre);--ease:cubic-bezier(.2,.8,.2,1)}

/* Réduction des animations : tout ce qui bouge seul s'arrête */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .apercu-flottant{display:none}
}

/* ==========================================================================
   V1.1 — pages prestations, bande photographique, révélations au défilement
   ========================================================================== */
.bandeau img{object-position:var(--cadrage,50% 50%)}

/* Formules : 2, 3 ou 4 colonnes selon la prestation */
.formules.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.formules.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.formules.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.formule .montant:not(:has(small)){font-family:var(--titre);font-size:1.5rem}
.sous-grille{margin:clamp(40px,5vw,64px) 0 18px}
.sous-grille:first-child{margin-top:0}
.notes-grille{margin-top:28px;gap:8px}
@media (max-width:1040px){.formules.n3,.formules.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.formules.n2,.formules.n3,.formules.n4{grid-template-columns:1fr}}
.deroule.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.deroule.n4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.deroule.n4{grid-template-columns:1fr}}

/* Triptyque (regard d'une page prestation) — défile au doigt sur mobile */
.triptyque{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(10px,1.6vw,20px);align-items:start}
.triptyque figure{margin:0}
.triptyque img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.triptyque figure:nth-child(2){margin-top:clamp(24px,6vw,96px)}
.triptyque figcaption{margin-top:12px;font-size:.88rem;color:var(--brume);display:grid;gap:4px;max-width:36ch}
.triptyque figcaption b{font:400 1.2rem/1.2 var(--titre);color:var(--nuit)}
@media (max-width:700px){
  .triptyque{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * max(var(--marge),var(--gout)));padding-inline:max(var(--marge),var(--gout));scroll-padding-inline:max(var(--marge),var(--gout));scrollbar-width:none}
  .triptyque::-webkit-scrollbar{display:none}
  .triptyque figure{scroll-snap-align:start}
  .triptyque figure:nth-child(2){margin-top:0}
}
.diptyque.egal{grid-template-columns:1fr 1fr;align-items:start}
.diptyque.egal figure img{aspect-ratio:4/5}
.diptyque.egal figure:last-child{margin-top:clamp(24px,7vw,120px)}
@media (max-width:560px){.diptyque.egal{grid-template-columns:1fr}.diptyque.egal figure:last-child{margin-top:0}}

/* Bande photographique de l'accueil : une planche-contact qui défile */
.regard-bande{overflow:hidden}
.bande-piste{--bord:calc(max(0px,(100vw - var(--largeur) - 2*var(--marge)) / 2) + max(var(--marge),var(--gout)));
  display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding-inline:var(--bord);scroll-padding-inline:var(--bord);scrollbar-width:none;cursor:grab;outline-offset:-2px}
.bande-piste::-webkit-scrollbar{display:none}
.bande-piste.tire{cursor:grabbing;scroll-snap-type:none;user-select:none}
.bande-piste.tire img{pointer-events:none}
.bande-piste li{flex:none;scroll-snap-align:start}
.bande-piste figure{margin:0}
.bande-piste img{height:clamp(300px,42vw,560px);width:auto;max-width:none;border-radius:2px;transition:filter .5s var(--doux)}
.bande-piste figcaption{margin-top:10px;font-size:.82rem;color:var(--brume)}
@media (hover:hover) and (pointer:fine){.bande-piste:hover img{filter:saturate(.75) brightness(.92)}.bande-piste li:hover img{filter:none}}
.bande-commandes{display:flex;align-items:center;gap:10px;margin-top:22px}
.bande-commandes .note{margin-left:8px}
.rond{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--nuit);background:transparent;color:var(--nuit);cursor:pointer;transition:background .3s var(--doux),color .3s var(--doux),opacity .3s}
.rond:hover{background:var(--nuit);color:var(--sel)}
.rond svg{width:14px;height:14px}
.rond[data-sens="-1"] svg{transform:scaleX(-1)}
.rond:disabled{opacity:.3;cursor:default;background:transparent;color:var(--nuit)}
@media (max-width:640px){.bande-piste img{height:clamp(300px,82vw,420px);max-width:82vw;object-fit:cover}}

/* Révélations au défilement : navigateurs compatibles, mouvement non réduit uniquement */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bandeau img{animation:derive linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .diptyque img,.triptyque img,.fiche .visuel img,.etape .image img{animation:revele linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes revele{from{clip-path:inset(10% 0 0 0);opacity:.35;transform:translateY(18px)}to{clip-path:inset(0);opacity:1;transform:none}}
@keyframes derive{to{transform:translateY(10%) scale(1.04)}}
/* Mention de la photo du bandeau : sous le contenu sur petit écran, jamais par-dessus un bouton */
@media (max-width:640px){
  .bandeau:has(.credit) .cadre{padding-bottom:calc(clamp(36px,6vw,80px) + 36px)}
  .bandeau .credit{left:max(var(--marge),var(--gout));right:max(var(--marge),var(--goutd));bottom:12px;line-height:1.35}
}
.triptyque:focus-visible{outline:2px solid var(--etang);outline-offset:4px}

/* ==========================================================================
   V2 — direction affirmée (15/10/2026)
   Deux teintes de parcours sur une base commune : sagne (photographie) et
   étang (web & IA). Photographies en plein cadre côté photo ; écrans posés sur
   une trame côté web. Même grille, mêmes typographies, mêmes espacements.
   ========================================================================== */
[data-univers="photo"]{--teinte:var(--sagne)}
[data-univers="web"]{--teinte:var(--etang)}
body[data-univers] .entete{box-shadow:inset 0 -2px 0 var(--teinte)}
body[data-univers] .lien-fort,body[data-univers] .formule li::before,body[data-univers] .deroule .donnee{color:var(--teinte)}
body[data-univers] .formule li::before{background:var(--teinte)}
body[data-univers] .bouton:not(.clair):not(.secondaire):hover{background:var(--teinte);border-color:var(--teinte)}
.pastille{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--teinte);flex:none}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--brume);line-height:1.3}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teinte);flex:none}

/* ---------- Premier écran ---------- */
.ouvre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:clamp(600px,calc(100svh - 69px),940px);border-bottom:1px solid var(--ligne)}
.ouvre-texte{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-5);padding:clamp(40px,6vh,80px) clamp(28px,4vw,72px) clamp(28px,4vh,48px) var(--bord)}
.ouvre h1{font-size:clamp(2.6rem,5vw,var(--t-6));line-height:.97;letter-spacing:-.035em;max-width:11.5ch}
.ouvre .lead{margin-top:var(--e-4);font:300 clamp(1.0625rem,1.3vw,1.25rem)/1.55 var(--texte);color:var(--brume);max-width:42ch}
.ouvre .lead strong{font-weight:500;color:var(--nuit)}
.routes{display:grid;border-top:1px solid var(--nuit)}
.route{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ligne);text-decoration:none}
.route-nom{display:flex;align-items:center;gap:12px;font:400 clamp(1.35rem,1.9vw,1.75rem)/1.15 var(--titre);letter-spacing:-.015em;transition:color .3s var(--doux)}
.route-nom::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teinte);flex:none}
.route-desc{grid-column:1;font-size:.92rem;color:var(--brume);padding-left:22px}
.route-fleche{grid-column:2;grid-row:1 / span 2;width:48px;height:48px;border-radius:50%;border:1px solid var(--ligne);display:grid;place-items:center;transition:background .35s var(--doux),border-color .35s var(--doux),color .35s var(--doux)}
.route-fleche svg{width:14px;height:14px;transition:transform .35s var(--doux)}
.route:hover .route-nom{color:var(--teinte)}
.route:hover .route-fleche{background:var(--teinte);border-color:var(--teinte);color:#f4f6f3}
.route:hover .route-fleche svg{transform:translateX(3px)}
.ouvre .obturateur{height:auto;min-height:100%}
.ouvre .obt-ombre{height:34%}
.obt-legende{position:absolute;left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,24px);z-index:4;pointer-events:none;display:flex;justify-content:space-between;gap:16px;font-size:.82rem;color:rgba(244,246,243,.88)}
.obt-legende .geste{display:inline-flex;align-items:center;gap:8px}
.obt-legende .geste::before{content:"";width:22px;height:1px;background:currentColor}
.ouvre .obt-cotes{padding-inline:clamp(16px,2.4vw,32px)}
.ouvre .wf{right:clamp(16px,2.4vw,32px);width:min(46%,440px);top:clamp(64px,10%,104px);bottom:clamp(64px,14%,120px)}
@media (max-width:860px){
  .ouvre{grid-template-columns:1fr;min-height:0}
  .ouvre .obturateur{order:-1;height:clamp(300px,42svh,440px);min-height:0}
  .ouvre-texte{padding:var(--e-3) max(var(--marge),var(--gout)) var(--e-4);gap:var(--e-4)}
  .ouvre h1{font-size:clamp(2.1rem,9.4vw,3.4rem);max-width:none}
  .ouvre .lead{margin-top:var(--e-2);font-size:1rem}
  .ouvre .wf{left:calc(var(--pos) + 12px);right:12px;top:48px;bottom:56px;width:auto;height:auto}
  .obt-legende .lieu{display:none}
}
@media (max-width:640px){.ouvre .wf-titre,.ouvre .wf-lignes,.ouvre .wf-bulle{display:none}}

/* ---------- Portes des deux univers ---------- */
.porte-visuel{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--sel-2)}
.porte-visuel:not(.ecran) img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--doux)}
.porte-visuel:hover img{transform:scale(1.025)}
.porte{grid-template-rows:auto auto 1fr auto}
.porte h2{display:flex;align-items:baseline;gap:14px}
.porte h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--teinte);flex:none;transform:translateY(-.12em)}
.porte .porte-liste a:hover .nom{color:var(--teinte)}
.porte .bouton:hover{background:var(--teinte);border-color:var(--teinte)}
.porte .lien-fort{color:var(--teinte)}
.porte-signe{display:none}

/* ---------- Écrans (côté web) : la capture posée sur une trame ---------- */
.ecran{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(16px,3.4vw,44px);border-radius:2px;overflow:hidden;
  background-color:color-mix(in srgb,var(--etang) 9%,var(--sel));
  background-image:linear-gradient(color-mix(in srgb,var(--etang) 15%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--etang) 15%,transparent) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px}
.ecran picture{display:contents}
.ecran img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:8px;
  box-shadow:0 0 0 1px rgba(23,32,36,.08),0 28px 48px -26px rgba(23,32,36,.5);transition:transform .9s var(--doux)}
a:hover > .ecran img,.ecran:hover img{transform:translateY(-4px)}
.ecran.duo{display:block;aspect-ratio:16/8.4}
.ecran.duo picture:first-child img{position:absolute;left:6%;top:9%;width:72%;max-height:none}
.ecran.duo picture:last-child img{position:absolute;right:7%;bottom:-6%;width:19%;max-height:none;border-radius:14px}
@media (max-width:640px){.ecran.duo{aspect-ratio:4/3}.ecran.duo picture:first-child img{left:5%;top:10%;width:80%}.ecran.duo picture:last-child img{width:28%;right:4%}}
.legende{font-size:.85rem;color:var(--brume);margin-top:12px;max-width:72ch}

/* ---------- Vitrine des réalisations (accueil) ---------- */
.vitrine{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,7vw,104px) clamp(16px,2.4vw,32px);align-items:start}
.carte-projet{display:grid;gap:var(--e-2);text-decoration:none;align-content:start}
.carte-projet.l{grid-column:span 7}
.carte-projet.p{grid-column:span 5}
.vitrine > .carte-projet:nth-child(2){margin-top:clamp(48px,9vw,160px)}
.vitrine > .carte-projet:nth-child(3){margin-top:calc(-1 * clamp(0px,6vw,104px))}
.cp-image{display:block;overflow:hidden;border-radius:2px;background:var(--sel-2)}
.carte-projet.l .cp-image{aspect-ratio:3/2}
.carte-projet.p .cp-image{aspect-ratio:4/5}
.cp-image:not(.ecran) img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--doux)}
.carte-projet:hover .cp-image:not(.ecran) img{transform:scale(1.03)}
.cp-texte{display:grid;gap:6px}
.cp-texte h3{font-size:clamp(1.6rem,2.6vw,var(--t-4));line-height:1.05;transition:color .3s var(--doux)}
.cp-texte p{color:var(--brume);max-width:44ch}
.carte-projet:hover h3{color:var(--teinte)}
@media (max-width:760px){.carte-projet.l,.carte-projet.p{grid-column:1 / -1}.vitrine > .carte-projet:nth-child(n){margin-top:0}.carte-projet.p .cp-image{aspect-ratio:4/4.4}}

/* Liste des réalisations : tag coloré au lieu d'une chaîne de mots */
.projet .meta{display:inline-flex;gap:10px;align-items:center;justify-content:flex-end}

/* ---------- Fiches : cadrage selon l'orientation de l'image ---------- */
.fiche.l .visuel{grid-column:1 / span 7}
.fiche.l .texte{grid-column:9 / -1}
.fiche.l:nth-of-type(even) .visuel{grid-column:6 / -1}
.fiche.l:nth-of-type(even) .texte{grid-column:1 / span 4}
.fiche.l .visuel img{aspect-ratio:3/2}
.fiche.p .visuel{grid-column:1 / span 5}
.fiche.p .texte{grid-column:7 / -1}
.fiche.p:nth-of-type(even) .visuel{grid-column:8 / -1}
.fiche.p:nth-of-type(even) .texte{grid-column:1 / span 6}
.fiche .visuel .ecran{aspect-ratio:4/5}
.fiche .visuel .ecran img{aspect-ratio:auto;width:auto}
.fiche.l .visuel .ecran{aspect-ratio:3/2}
@media (max-width:820px){.fiche.l .visuel,.fiche.l .texte,.fiche.p .visuel,.fiche.p .texte,.fiche.l:nth-of-type(even) .visuel,.fiche.l:nth-of-type(even) .texte,.fiche.p:nth-of-type(even) .visuel,.fiche.p:nth-of-type(even) .texte{grid-column:1 / -1;order:0}}
.fiche .texte h2{font-size:clamp(2rem,3.6vw,var(--t-5))}

/* ---------- Contenus à fournir : signalés sans prendre la place des images ---------- */
.manque.discret{min-height:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:12px 16px;border-width:1px;background:none}
.manque.discret strong{font-size:.8rem}
.manque.discret p{font-size:.88rem}
.figure-note{display:grid;gap:12px}

/* ---------- Relance : appel placé juste après les prix ---------- */
.relance{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:var(--e-4) 0;border-top:1px solid var(--ligne)}
.relance p{font:400 clamp(1.3rem,2vw,1.6rem)/1.25 var(--titre);max-width:30ch}

/* ---------- Appel final à deux issues ---------- */
.appel .boutons{display:flex;flex-wrap:wrap;gap:12px}
.appel .bouton.contour{background:transparent;color:var(--sel);border-color:color-mix(in srgb,var(--sel) 55%,transparent)}
.appel .bouton.contour:hover{background:var(--sel);color:var(--nuit);border-color:var(--sel)}

/* ---------- En-tête : contact toujours visible ---------- */
.entete-contact{display:none}
.nav-principale .nav-note{display:none}
.nav-principale a[data-univers]{display:inline-flex;align-items:center;gap:8px}
.nav-principale a[data-univers]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teinte);flex:none}
.nav-principale a[data-univers]::after{background:var(--teinte)}
@media (max-width:880px){
  .entete .cadre{gap:10px}
  .entete-contact{display:inline-flex;margin-left:auto;min-height:44px;padding:10px 18px}
  .entete[data-ouvert] .nav-principale{animation:menu-entre .32s var(--doux) both}
  .entete[data-ouvert] .nav-principale a[data-univers]::before{width:12px;height:12px}
  .entete[data-ouvert] .nav-principale a[data-univers]{gap:14px}
  .entete[data-ouvert] .nav-principale .nav-note{display:block;margin-top:auto;padding-top:32px;font-size:.92rem;color:var(--brume)}
  .entete[data-ouvert] .nav-principale .bouton{display:none}
}
@media (max-width:360px){.marque{letter-spacing:.08em}.entete-contact{padding:10px 14px}}
@keyframes menu-entre{from{opacity:0;transform:translateY(-8px)}}

/* ---------- Formulaire : états visibles ---------- */
.statut:empty{display:none}
.statut[data-etat]{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:4px;font-weight:500;line-height:1.45}
.statut[data-etat]::before{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:#fff}
.statut[data-etat="ok"]{color:var(--succes);background:color-mix(in srgb,var(--succes) 10%,transparent)}
.statut[data-etat="ok"]::before{content:"✓";background:var(--succes)}
.statut[data-etat="erreur"]{color:#b3261e;background:color-mix(in srgb,#b3261e 8%,transparent)}
.statut[data-etat="erreur"]::before{content:"!";background:#b3261e}
.statut[data-etat="envoi"]{color:var(--brume);background:var(--sel-2)}
.statut[data-etat="envoi"]::before{content:"";border:2px solid currentColor;border-right-color:transparent;animation:tourne .8s linear infinite}
:root[data-theme="dark"] .statut[data-etat="erreur"]{color:#ff9a8f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statut[data-etat="erreur"]{color:#ff9a8f}}
.bouton[aria-busy="true"]{cursor:progress;opacity:.75}
.champ:focus-within label{color:var(--teinte)}
.champ [aria-invalid="false"]:not(:placeholder-shown){border-color:color-mix(in srgb,var(--succes) 70%,transparent)}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- Personne ---------- */
.personne .photo figure{margin:0}
.personne .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.personne .photo .figure-note{margin-top:12px}

@media (prefers-reduced-motion:reduce){.entete[data-ouvert] .nav-principale{animation:none}.statut[data-etat="envoi"]::before{animation:none}}
@media (max-width:860px){
  .ouvre .obturateur{height:clamp(250px,36svh,400px)}
  .ouvre-texte{gap:var(--e-3)}
  .route{padding:12px 0}
  .route-desc{font-size:.86rem}
}
.ouvre .wf{width:min(40%,400px)}
@media (max-width:640px){.projet .meta{justify-content:flex-start}.projet .vignette img{object-position:50% 0}}
.apercu-flottant img{object-position:50% 0}
/* Menu mobile ouvert : le flou de l'en-tête créerait un bloc conteneur pour le menu « fixed »
   (le menu serait limité à la hauteur de l'en-tête). On le retire pendant l'ouverture. */
.entete[data-ouvert]{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--sel)}
@media (max-width:880px){.entete[data-ouvert] .nav-principale{height:calc(100dvh - 68px)}}

/* ==========================================================================
   V7 — recentrage sur les sites et les assistants (15/10/2026)
   ========================================================================== */
.ouvre h1.h1-long{font-size:clamp(2.3rem,4vw,4.1rem);line-height:1;max-width:15ch}
.ouvre .routes .route{padding:14px 0}
@media (max-width:860px){.ouvre h1.h1-long{font-size:clamp(1.95rem,8.2vw,3rem);max-width:none}}
.essai{background:color-mix(in srgb,var(--etang) 6%,var(--sel));padding-block:var(--e-6)}
.essai + .section{padding-top:var(--section)}
.essai .grille{align-items:center}
.actions-essai{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.liens-photo{display:flex;flex-wrap:wrap;gap:8px 24px}
#offres .formule .accroche{min-height:3em}
#offres .formule li{font-size:.93rem}

/* ==========================================================================
   V8 — équilibre : le web mène, la photographie reste un univers visible
   ========================================================================== */
.bloc-photo{background:color-mix(in srgb,var(--sagne) 5%,var(--sel))}
.bloc-photo + .section{padding-top:var(--section)}
.bloc-photo-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px clamp(16px,2.4vw,32px);align-items:center}
.bloc-photo-image{grid-column:1 / span 6;overflow:hidden;border-radius:2px}
.bloc-photo-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bloc-photo .porte{grid-column:8 / -1;padding:0;border:0;grid-template-rows:auto auto auto}
.bloc-photo .porte h2{font-size:clamp(2rem,3.6vw,3rem)}
.bande-titre{margin-top:clamp(56px,8vw,112px)}
@media (max-width:900px){.bloc-photo-image,.bloc-photo .porte{grid-column:1 / -1}}
.section.bloc-photo{padding-top:var(--section)}

/* Version publiée : les emplacements « à fournir » sont absents ; on évite les cases vides */
.figure-note:empty,.col-plein:empty,.fiche:has(> .col-plein:empty){display:none}
.diptyque.egal > figure:empty{display:none}
.diptyque.egal:has(> figure:empty){grid-template-columns:minmax(0,560px)}

/* K10 (audit du 10/11) : comparatif des formules mariage, mêmes rubriques pour toutes. */
.comparatif{margin-top:32px;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.comparatif summary{cursor:pointer;padding:16px 0;font-weight:600;min-height:44px}
.comparatif-defile{overflow-x:auto;padding-bottom:16px}
.comparatif-defile:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.comparatif table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
.comparatif > .note{margin:0 0 12px}
.comparatif tbody th,.comparatif thead th:first-child{position:sticky;left:0;background:var(--sel);z-index:1}
.comparatif th,.comparatif td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-top:1px solid var(--ligne)}
.comparatif thead th{border-top:0}
.comparatif tbody th{font-weight:600;width:18%}
/* O1 (10/11) : la formule choisie sur une page d'offre accompagne la demande de contact. */
.offre-choisie{margin:0;padding:12px 16px;border-left:3px solid var(--teinte);background:var(--sel-2);font-size:var(--t-0);line-height:1.5}
.offre-choisie strong{font-weight:600}
.lien-bouton{background:none;border:0;padding:0 0 0 .4em;color:var(--etang);font:inherit;text-decoration:underline;cursor:pointer;min-height:24px}
.lien-bouton:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* O1 : formules web comparables (numerique.html), même gabarit que les formules mariage. */
.formule .separement{margin-top:-10px;font-size:var(--t-0);color:var(--brume)}
.formule .exemple{font-size:var(--t-0);justify-self:start}
.groupe:has(> .formules) > *{grid-column:1 / -1}
.groupe:has(> .formules) > header{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px clamp(16px,2.4vw,32px);align-items:start}
.groupe:has(> .formules) > header .note{max-width:68ch}
@media (max-width:900px){.groupe:has(> .formules) > header{grid-template-columns:1fr}}
.groupe .comparatif{margin-top:0}
.liste-simple{display:grid;gap:10px;max-width:68ch;padding:0;list-style:none}

/* V1 / V6 (audit visuel du 10/11) — ouvertures typographiques plus compactes, vue large en galerie */
.affiche.compacte{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1;letter-spacing:-.03em}
.ouverture.serree{padding-top:clamp(32px,5vw,72px);padding-bottom:0}
.ouverture .droite .chapeau{margin:0}
.vue-large{margin:0}
.vue-large img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 60%;border-radius:2px}
.vue-large figcaption{font-size:.82rem;color:var(--brume);margin-top:10px}
@media (max-width:560px){.vue-large img{aspect-ratio:4/3}}

/* V2 (audit visuel du 10/11) — la démonstration de l'accueil montre une page aboutie, marquée « Exemple de page » */
.wf-fini{background:rgba(14,20,23,.82);border-color:rgba(244,246,243,.55);box-shadow:0 18px 40px rgba(0,0,0,.28);overflow:hidden}
.wf-fini .wf-corps{grid-template-rows:auto auto 1fr auto}
.wf-fini .wf-titre{height:auto;border:0;padding:0;display:grid;gap:6px;align-items:start}
.wf-fini .wf-sur{font:500 10px/1.2 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:rgba(207,230,238,.85)}
.wf-fini .wf-titre b{font:400 clamp(1.25rem,2.1vw,1.9rem)/1.05 var(--titre);letter-spacing:-.02em;color:#f4f6f3}
.wf-fini .wf-lignes p{font:400 clamp(.72rem,.9vw,.84rem)/1.45 var(--texte);color:rgba(244,246,243,.82);margin:0;max-width:34ch}
.wf-fini .wf-image{position:relative;border:0;padding:0;background:none;overflow:hidden;border-radius:2px;min-height:60px}
.obt-plan .wf-fini .wf-image picture,.obt-plan .wf-fini .wf-image img{position:absolute;inset:0;width:100%;height:100%}
.obt-plan .wf-fini .wf-image img{filter:none;object-fit:cover;object-position:50% 45%}
.wf-fini .wf-bouton{background:#f4f6f3;color:#172024;border-color:#f4f6f3;font:500 11px var(--texte)}
.wf-fini .wf-bulle{font:400 11px var(--texte);color:#f4f6f3;background:rgba(31,94,107,.55)}
.wf-fini .wf-barre span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:640px){
  .ouvre .wf-fini .wf-titre{display:grid}
  .wf-fini .wf-sur,.wf-fini .wf-barre i{display:none}
  .wf-fini .wf-barre span{margin-left:0}
  .wf-fini .wf-titre b{font-size:1.05rem}
  .wf-fini .wf-corps{grid-template-rows:auto 1fr auto;padding:10px}
}

/* V3 (audit visuel du 10/11) — cartes d'offres résumées sur l'accueil : montants et boutons alignés en bas */
.formule.resume{grid-template-rows:1fr auto auto}
.formule.resume .bouton{justify-self:start}

/* V5 (audit visuel du 10/11) — grille Mariage : en-têtes, prix, listes et boutons alignés par rangée */
@supports (grid-template-rows:subgrid){
  #grille .formules{grid-auto-rows:auto}
  #grille .formules>.formule{grid-row:span 4;grid-template-rows:subgrid;row-gap:18px}
}