/* =====================================================================
   Le 9 Faubourg Montmartre, page d'attente (teasing)
   Tokens repris du Brand Design System (préfixe --fm-, sept. 2026).
   Règles tenues : trois verts seulement, Poiret One en capitales pour
   l'identité, Sora pour l'information, rayon 0, aucune ombre décorative,
   champs soulignés, CTA carré, deux signatures au plus par surface.
   ===================================================================== */

@font-face{font-family:"Poiret One";src:url("assets/fonts/PoiretOne-Regular.woff2") format("woff2"),url("assets/fonts/PoiretOne-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/Sora-Variable.woff2") format("woff2-variations"),url("assets/fonts/Sora-Variable.woff2") format("woff2"),url("assets/fonts/Sora-Variable.ttf") format("truetype");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  /* Couleurs de marque */
  --fm-green-deep:#004F45;
  --fm-green-light:#CCE5D6;
  --fm-turquoise:#28B29D;
  /* Teintes techniques */
  --fm-green-deep-900:#00352E;
  --fm-green-deep-800:#003F38;
  --fm-green-deep-600:#0A6459;
  --fm-green-light-050:#F2F8F4;
  --fm-green-light-100:#E3F0E9;
  --fm-turquoise-deep:#17786A;
  --fm-turquoise-700:#1F9686;
  /* Neutres */
  --fm-white:#FFFFFF;
  --fm-paper:#FCFDFC;
  --fm-grey-ink:#5A6764;
  /* Sémantique */
  --fm-text-primary:var(--fm-green-deep);
  --fm-text-secondary:var(--fm-green-deep-600);
  --fm-text-translation:var(--fm-turquoise-deep);
  --fm-line-soft:color-mix(in oklab, var(--fm-green-deep) 22%, transparent);
  --fm-line-on-deep:color-mix(in oklab, var(--fm-green-light) 55%, transparent);
  --fm-focus-ring:var(--fm-turquoise);
  --fm-disabled-ink:color-mix(in oklab, var(--fm-green-deep) 38%, var(--fm-white));
  --fm-disabled-surface:var(--fm-green-light-100);
  --fm-error:#9E3B2F;
  --fm-error-surface:#FBF1EF;
  --fm-shadow-overlay:0 24px 64px -32px color-mix(in oklab, var(--fm-green-deep) 30%, transparent);

  /* Typographie */
  --fm-font-display:"Poiret One",system-ui,sans-serif;
  --fm-font-text:"Sora",system-ui,sans-serif;

  /* Mouvement */
  --fm-dur-instant:120ms;
  --fm-dur-quick:280ms;
  --fm-dur-base:600ms;
  --fm-dur-slow:900ms;
  --fm-dur-line:1400ms;
  --fm-ease-editorial:cubic-bezier(.22,.61,.36,1);
  --fm-ease-mask:cubic-bezier(.76,0,.24,1);
  --fm-stagger:120ms;
  --fm-reveal-shift:24px;

  /* Grille */
  --fm-margin-page:clamp(20px,5vw,88px);
  --fm-touch-min:44px;

  /* Propre à cette page : rythme vertical qui se tasse sur les écrans bas */
  --pad-y:clamp(28px,6.5vh,72px);
  --gap-y:clamp(12px,2.4vh,24px);
}
@media (prefers-reduced-motion:reduce){
  :root{--fm-dur-base:1ms;--fm-dur-slow:1ms;--fm-dur-line:1ms;--fm-dur-quick:1ms;--fm-stagger:0ms;--fm-reveal-shift:0px}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fm-paper);color:var(--fm-text-primary);font-family:var(--fm-font-text);font-size:16px;line-height:1.75;font-weight:300}
img{max-width:100%;display:block}
sup{font-size:.62em;line-height:0;vertical-align:.5em}
:focus-visible{outline:2px solid var(--fm-focus-ring);outline-offset:3px}
::selection{background:var(--fm-green-light);color:var(--fm-green-deep)}
a{color:var(--fm-turquoise-deep);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--fm-turquoise) 45%,transparent);transition:color var(--fm-dur-instant) var(--fm-ease-editorial),border-color var(--fm-dur-instant) var(--fm-ease-editorial)}
a:hover{color:var(--fm-green-deep);border-bottom-color:var(--fm-green-deep)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Primitives du système ---------- */
.eyebrow{margin:0;font-size:12px;line-height:1.2;letter-spacing:.24em;font-weight:500;text-transform:uppercase;color:color-mix(in oklab,var(--fm-green-light) 80%,transparent)}
.eyebrow--ink{color:var(--fm-text-secondary)}
.label{font-size:11px;line-height:1.3;letter-spacing:.2em;font-weight:500;text-transform:uppercase;color:var(--fm-text-secondary)}

/* Filet à pointe art déco */
.filet{display:flex;align-items:center;width:112px;color:var(--fm-green-light)}
.filet span{flex:1;border-top:1px solid currentColor}
.filet i{flex:none;width:20px;height:10px;margin:0 -1px;background:currentColor;clip-path:polygon(0 0,50% 100%,100% 0)}
.filet--short{width:88px;color:var(--fm-green-deep)}

/* ---------- Mise en page ---------- */
/* Mobile d'abord : une colonne (identité, formulaire, pied). */
.page{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "form" "foot";min-height:100vh;min-height:100dvh}
.identity{grid-area:id}
.photo{grid-area:photo;display:none;margin:0}
.contact{grid-area:form}
.foot{grid-area:foot}

/* ---------- Identité ---------- */
.identity{background:var(--fm-green-deep);color:var(--fm-green-light);padding:48px var(--fm-margin-page) 44px;display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.identity__logo{margin:0;line-height:0}
.identity__logo img{height:clamp(132px,34vw,176px);width:auto}
.identity__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-y);max-width:36rem}
.identity__title{margin:0;font-family:var(--fm-font-display);font-weight:400;text-transform:uppercase;color:var(--fm-green-light);font-size:clamp(22px,6.3vw,36px);line-height:1.1;letter-spacing:.08em;-webkit-text-stroke:.4px currentColor;paint-order:stroke fill;text-wrap:balance}
.identity__intro{margin:0;font-size:16px;line-height:1.65;font-weight:300;color:var(--fm-white);text-wrap:pretty}

/* ---------- Sélecteur de langue ----------
   Motif « FR | EN » du header bilingue du design system : Sora 11 px, capitales,
   langue active en blanc soulignée d'un filet turquoise, l'autre adoucie.
   Zone cliquable de 44 px malgré l'aspect discret. */
.identity{position:relative}
.lang{position:absolute;top:28px;right:calc(var(--fm-margin-page) - 8px);display:flex;align-items:center;color:var(--fm-green-light)}
.lang__icon{width:15px;height:15px;margin-right:4px;opacity:.7}
.lang__btn{appearance:none;position:relative;min-width:40px;min-height:44px;padding:0 8px 0 calc(8px + .18em);border:0;background:none;font-family:var(--fm-font-text);font-size:11px;line-height:1;letter-spacing:.18em;font-weight:500;color:inherit;opacity:0.75;cursor:pointer;transition:opacity var(--fm-dur-instant) var(--fm-ease-editorial),color var(--fm-dur-instant) var(--fm-ease-editorial)}
.lang__btn:hover{opacity:1}
.lang__btn[aria-pressed="true"]{opacity:1;font-weight:600;color:var(--fm-white);cursor:default}
.lang__btn[aria-pressed="true"]::after{content:"";position:absolute;left:calc(8px + .18em);right:8px;bottom:11px;border-bottom:1px solid var(--fm-turquoise)}
.lang__sep{width:1px;height:12px;background:var(--fm-line-on-deep)}

/* ---------- Photographie ---------- */
.photo{position:relative;overflow:hidden;background:var(--fm-green-deep-900)}

/* ---------- Slider ----------
   Effet : la photo entrante se dévoile derrière un masque (900 ms, dans le sens
   du défilement). Pas de zoom animé : un redimensionnement lent fait trembler
   l'image (arrondis de pixels), constaté le 14/09/2026. */
.slider{--slide-dur:6000ms}
.slider__track{position:absolute;inset:0;cursor:zoom-in;touch-action:pan-y}
.slider__track:focus-visible{outline:2px solid var(--fm-focus-ring);outline-offset:-6px}
.slide{position:absolute;inset:0;margin:0;overflow:hidden;visibility:hidden}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.slide.is-active{visibility:visible;z-index:2;animation:fm-mask var(--fm-dur-slow) var(--fm-ease-mask) 200ms both}
.slide.is-active.from-next{animation:fm-wipe-next var(--fm-dur-slow) var(--fm-ease-mask) both}
.slide.is-active.from-prev{animation:fm-wipe-prev var(--fm-dur-slow) var(--fm-ease-mask) both}
.slide.is-leaving{visibility:visible;z-index:1}

.lb__close:hover,.lb__nav:hover{background:var(--fm-green-light);border-color:var(--fm-green-light);color:var(--fm-green-deep)}

/* ---------- Plein écran ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--fm-green-deep-900);color:var(--fm-green-light);overflow:hidden}
.lb[open]{animation:fm-fade var(--fm-dur-quick) var(--fm-ease-editorial)}
.lb::backdrop{background:var(--fm-green-deep-900)}
.lb__stage{position:absolute;inset:clamp(64px,9vh,96px) clamp(76px,8vw,140px) clamp(72px,11vh,110px);touch-action:pan-y}
.lb__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--fm-dur-base) var(--fm-ease-editorial)}
.lb__stage img.is-on{opacity:1}
.lb__close,.lb__nav{position:absolute;z-index:2;display:grid;place-items:center;border:1px solid var(--fm-line-on-deep);border-radius:0;background:transparent;color:var(--fm-green-light);cursor:pointer;transition:background-color var(--fm-dur-instant) var(--fm-ease-editorial),color var(--fm-dur-instant) var(--fm-ease-editorial),border-color var(--fm-dur-instant) var(--fm-ease-editorial)}
.lb__close{top:clamp(14px,2.5vh,28px);right:clamp(14px,2.5vw,40px);width:48px;height:48px}
.lb__close span,.lb__close span::after{display:block;width:18px;height:1px;background:currentColor;transform:rotate(45deg)}
.lb__close span::after{content:"";transform:rotate(90deg)}
.lb__nav{top:50%;width:52px;height:52px;margin-top:-26px}
.lb__nav svg{width:22px;height:22px}
.lb__nav--prev{left:clamp(12px,2.5vw,40px)}
.lb__nav--next{right:clamp(12px,2.5vw,40px)}
.lb__caption{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);margin:0;padding:0 80px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 18px;font-size:13px;line-height:1.5;font-weight:300;color:var(--fm-green-light);text-align:center}
.lb__count{font-size:12px;letter-spacing:.16em;font-weight:500;color:var(--fm-white);font-variant-numeric:tabular-nums}

/* ---------- Formulaire ---------- */
.contact{background:var(--fm-paper);padding:48px var(--fm-margin-page) 56px}
.contact__inner{width:100%;max-width:520px;margin:0 auto}
.form{display:flex;flex-direction:column;gap:var(--gap-y)}
.form__head{display:flex;flex-direction:column;gap:12px}
.form__title,.success__title{margin:0;font-family:var(--fm-font-display);font-weight:400;text-transform:uppercase;color:var(--fm-green-deep);font-size:clamp(24px,6.4vw,30px);line-height:1.15;letter-spacing:.1em;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill;text-wrap:balance}
.form__lead{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--fm-text-secondary)}
.advisor{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.advisor__tel{font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--fm-green-deep);border-bottom:1px solid var(--fm-turquoise);padding-bottom:1px;white-space:nowrap}
.advisor__tel:hover{color:var(--fm-turquoise-deep);border-bottom-color:var(--fm-turquoise-deep)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
fieldset{border:0;margin:0;padding:0;min-width:0}

/* Sélecteur Acheter / Investir : deux panneaux encadrés, jamais deux boutons radio */
.projet legend{padding:0;margin-bottom:10px}
.projet__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.projet__opt{position:relative;display:flex;cursor:pointer}
.projet__opt input{position:absolute;opacity:0;width:1px;height:1px}
.projet__card{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:clamp(64px,10vh,84px);padding:16px 16px 14px 22px;border:1px solid var(--fm-line-soft);background:transparent;transition:background-color var(--fm-dur-quick) var(--fm-ease-editorial),border-color var(--fm-dur-quick) var(--fm-ease-editorial)}
.projet__card::before,.projet__card::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--fm-green-deep);transition:border-color var(--fm-dur-quick) var(--fm-ease-editorial)}
.projet__card::before{top:5px;left:5px;border-top-width:1.5px;border-left-width:1.5px}
.projet__card::after{bottom:5px;right:5px;border-bottom-width:1.5px;border-right-width:1.5px}
.projet__name{font-family:var(--fm-font-display);text-transform:uppercase;font-size:clamp(20px,5.4vw,24px);line-height:1.1;letter-spacing:.1em;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill;color:var(--fm-green-deep)}
.projet__sub{font-size:12px;line-height:1.4;font-weight:300;color:var(--fm-text-secondary)}
.projet__opt:hover .projet__card{border-color:var(--fm-green-deep)}
.projet__opt input:checked + .projet__card{background:var(--fm-green-deep);border-color:var(--fm-green-deep)}
.projet__opt input:checked + .projet__card::before,.projet__opt input:checked + .projet__card::after{border-color:var(--fm-green-light)}
.projet__opt input:checked + .projet__card .projet__name{color:var(--fm-white)}
.projet__opt input:checked + .projet__card .projet__sub{color:color-mix(in oklab,var(--fm-white) 82%,transparent)}
.projet__opt input:focus-visible + .projet__card{outline:2px solid var(--fm-focus-ring);outline-offset:3px}

/* Civilité (facultative) */
.civ{display:flex;gap:28px}
.civ__opt{display:inline-flex;align-items:center;gap:10px;min-height:32px;cursor:pointer;font-size:14px;font-weight:300}
.civ__opt input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:16px;height:16px;border:1px solid var(--fm-green-deep);border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.civ__opt input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--fm-green-deep);transform:scale(0);transition:transform var(--fm-dur-quick) var(--fm-ease-editorial)}
.civ__opt input:checked::after{transform:scale(1)}

/* Champs soulignés */
.fields{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:clamp(8px,1.6vh,16px)}
.fld{display:flex;flex-direction:column;gap:2px;min-width:0}
.fld input{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--fm-touch-min);padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--fm-line-soft);border-radius:0;font:inherit;font-size:16px;font-weight:300;color:var(--fm-text-primary);outline:none;transition:border-color var(--fm-dur-instant) var(--fm-ease-editorial)}
.fld input:hover{border-bottom-color:color-mix(in oklab,var(--fm-green-deep) 45%,transparent)}
.fld input:focus{border-bottom-color:var(--fm-turquoise);box-shadow:0 1px 0 0 var(--fm-turquoise)}
.fld input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--fm-paper) inset;-webkit-text-fill-color:var(--fm-green-deep)}
.fld.is-invalid input{border-bottom-color:var(--fm-error);box-shadow:0 1px 0 0 var(--fm-error)}
.fld.is-invalid .label{color:var(--fm-error)}

/* Case à cocher carrée */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;position:relative}
.check input{position:absolute;opacity:0;width:18px;height:18px;margin:2px 0 0;cursor:pointer}
.check__box{position:relative;flex:none;width:18px;height:18px;margin-top:2px;border:1px solid var(--fm-green-deep);background:transparent;transition:background-color var(--fm-dur-instant) var(--fm-ease-editorial)}
.check__box::after{content:"";position:absolute;left:4px;top:3px;width:9px;height:5px;border-left:1.5px solid var(--fm-white);border-bottom:1.5px solid var(--fm-white);transform:rotate(-45deg);opacity:0}
.check input:checked + .check__box{background:var(--fm-green-deep)}
.check input:checked + .check__box::after{opacity:1}
.check input:focus-visible + .check__box{outline:2px solid var(--fm-focus-ring);outline-offset:3px}
.check.is-invalid .check__box{border-color:var(--fm-error);background:var(--fm-error-surface)}
.check__txt{font-size:13px;line-height:1.55;font-weight:300}

.form__error{margin:0;padding:10px 14px;background:var(--fm-error-surface);color:var(--fm-error);font-size:13px;line-height:1.5;font-weight:400}

/* CTA carré */
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 32px;border:1px solid var(--fm-green-deep);border-radius:0;background:var(--fm-green-deep);color:var(--fm-white);font-family:var(--fm-font-text);font-size:12px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;cursor:pointer;transition:background-color var(--fm-dur-instant) var(--fm-ease-editorial)}
.btn:hover{background:var(--fm-green-deep-800)}
.btn:active{background:var(--fm-green-deep-900)}
.btn:disabled{background:var(--fm-disabled-surface);border-color:transparent;color:var(--fm-disabled-ink);cursor:progress}

.form__legal{margin:0;font-size:11px;line-height:1.6;font-weight:300;color:var(--fm-grey-ink)}
.linkish{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--fm-turquoise-deep);border-bottom:1px solid color-mix(in oklab,var(--fm-turquoise) 45%,transparent);cursor:pointer;transition:color var(--fm-dur-instant) var(--fm-ease-editorial),border-color var(--fm-dur-instant) var(--fm-ease-editorial)}
.linkish:hover{color:var(--fm-green-deep);border-bottom-color:var(--fm-green-deep)}
.linkish--deep{color:var(--fm-green-light);border-bottom-color:var(--fm-line-on-deep)}
.linkish--deep:hover{color:var(--fm-white);border-bottom-color:var(--fm-white)}

/* Confirmation */
.success{display:flex;flex-direction:column;align-items:flex-start;gap:20px;outline:none}
.success[hidden]{display:none}
.success__title{font-size:clamp(40px,10vw,56px);letter-spacing:.08em;-webkit-text-stroke:.55px currentColor}
.success__txt{margin:0;font-size:16px;line-height:1.7;max-width:34ch}

/* ---------- Pied ---------- */
.foot{background:var(--fm-green-deep);color:var(--fm-green-light);padding:28px var(--fm-margin-page) calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;border-top:1px solid var(--fm-line-on-deep);font-size:12px;line-height:1.5;letter-spacing:.02em}
.foot__addr{margin:0;font-weight:300}
.foot__end{display:flex;align-items:center;gap:20px}
/* Logo Izimmo officiel version fond foncé (blanc transparent, « by ARKEA » rouge) */
.foot__izimmo{display:inline-flex}
.foot__izimmo img{height:32px;width:auto}

/* ---------- Mentions légales (overlay fonctionnel) ---------- */
.legal{width:min(640px,calc(100vw - 32px));max-height:min(80vh,720px);padding:0;border:1px solid var(--fm-line-soft);border-radius:0;background:var(--fm-paper);color:var(--fm-text-primary);box-shadow:var(--fm-shadow-overlay)}
.legal::backdrop{background:color-mix(in oklab,var(--fm-green-deep-900) 55%,transparent)}
.legal__inner{position:relative;padding:40px clamp(20px,5vw,48px) 36px;font-size:14px;line-height:1.65}
.legal__inner p{margin:0 0 16px}
.legal__inner .label{margin:24px 0 8px}
.legal__title{margin:0 48px 8px 0;font-family:var(--fm-font-display);font-weight:400;text-transform:uppercase;font-size:28px;line-height:1.15;letter-spacing:.1em;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.legal__small{font-size:12px;color:var(--fm-grey-ink)}
.legal__close{position:absolute;top:16px;right:16px;width:var(--fm-touch-min);height:var(--fm-touch-min);border:1px solid var(--fm-line-soft);border-radius:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.legal__close span,.legal__close span::after{display:block;width:16px;height:1px;background:var(--fm-green-deep);transform:rotate(45deg)}
.legal__close span::after{content:"";transform:rotate(90deg)}
.legal__close:hover{border-color:var(--fm-green-deep)}

/* ---------- Mouvement : l'imprimé qui prend vie ---------- */
@keyframes fm-rise{from{opacity:0;transform:translateY(var(--fm-reveal-shift))}to{opacity:1;transform:none}}
@keyframes fm-draw{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes fm-mask{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.reveal{animation:fm-rise var(--fm-dur-base) var(--fm-ease-editorial) both;animation-delay:calc(var(--i,0) * var(--fm-stagger) + 120ms)}
.reveal-line{animation:fm-draw var(--fm-dur-line) var(--fm-ease-editorial) 360ms both}
@keyframes fm-wipe-next{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes fm-wipe-prev{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fm-fade{from{opacity:0}}

/* Téléphone : en-tête resserré pour faire remonter le formulaire
   (sur petit format, on retire d'abord ce qui est secondaire : la traduction). */
@media (max-width:767px){
  .identity{padding-top:36px;padding-bottom:36px;gap:28px}
  .identity__logo img{height:120px}
  .contact{padding-top:40px}
}

/* =====================================================================
   Tablette : une colonne, plus d'air
   ===================================================================== */
@media (min-width:768px){
  .identity{padding-top:64px;padding-bottom:56px}
  .lang{top:54px}
  .identity__logo img{height:200px}
  .identity__title{font-size:clamp(34px,5vw,42px)}
  .contact{padding-top:64px;padding-bottom:72px}
}

/* =====================================================================
   Desktop : page non défilante, tout tient dans la hauteur de l'écran.
   Si l'écran est très bas, seule la colonne formulaire défile.
   ===================================================================== */
@media (min-width:1024px){
  html,body{height:100%;overflow:hidden}
  .page{height:100vh;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr) minmax(460px,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"id form" "foot form"}
  .identity{min-height:0;padding:var(--pad-y) clamp(40px,5vw,88px) var(--gap-y);justify-content:space-between;gap:var(--gap-y)}
  .lang{top:calc(var(--pad-y) - 12px);right:calc(clamp(40px,5vw,88px) - 8px)}
  .identity__logo img{height:clamp(130px,22vh,230px)}
  .identity__title{font-size:clamp(26px,min(2.2vw,3.95vh),39px)}
  .identity__intro{font-size:clamp(15px,min(1.3vw,2.2vh),18px)}
  .foot{border-top:0;padding:18px clamp(40px,5vw,88px) clamp(20px,4vh,40px);position:relative}
  .foot::before{content:"";position:absolute;top:0;left:clamp(40px,5vw,88px);right:clamp(40px,5vw,88px);border-top:1px solid var(--fm-line-on-deep)}
  .contact{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;padding:var(--pad-y) clamp(32px,3.6vw,72px)}
  .contact__inner{margin:auto;max-width:500px}
}

/* Écrans de portable (hauteur utile 650 à 860 px) : formulaire compact pour
   que le bouton reste visible sans défilement. Souris : 40 px suffisent. */
@media (min-width:1024px) and (max-height:900px){
  :root{--gap-y:clamp(10px,2vh,18px)}
  .contact{padding-block:clamp(20px,4.2vh,40px)}
  .form__head{gap:8px}
  .projet legend{margin-bottom:8px}
  .form__head .eyebrow{display:none}
  .form__title{font-size:24px}
  .projet__sub{display:none}
  .projet__card{min-height:50px;padding:10px 14px 8px 22px}
  .civ__opt{min-height:26px}
  .fields{row-gap:clamp(6px,1.2vh,12px)}
  .fld input{min-height:40px;padding:6px 0}
}

/* Grands écrans : trois bandes, comme la brochure (texte · photographie · panneau) */
@media (min-width:1280px){
  .page{grid-template-columns:minmax(0,5.4fr) minmax(0,2.8fr) minmax(480px,4.6fr);grid-template-areas:"id photo form" "foot photo form"}
  .photo{display:block}
}