(mentions légales). */ .di-page,.di-pied{padding-right:var(--reserve-d)} .di-header__in{padding-right:calc(var(--gouttiere) + var(--rail-l))} :root:has(main.di-sans-rail) .di-page,:root:has(main.di-sans-rail) .di-pied{padding-right:0} :root:has(main.di-sans-rail) .di-header__in{padding-right:var(--gouttiere)} } /* ── Header : nav à plat ≥ 960 px, burger dessous ──────────────────── */ .di-header{position:fixed;top:0;left:0;right:0;z-index:60;isolation:isolate;height:var(--header-h);background:var(--voile);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--hair);color:var(--ink)} .di-header__in{height:100%;display:flex;align-items:center;gap:8px;padding:0 var(--gouttiere)} .di-logo{display:inline-flex;align-items:center;min-height:44px;font:600 19px/1 var(--font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap} .di-logo span{color:var(--lagon)} .di-header__vide{flex:1} .di-nav{display:none} @media (min-width:960px){.di-nav{display:block;margin-left:20px}} .di-nav > ul{display:flex;align-items:center;gap:2px} .di-nav a,.di-nav__sous > button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);border-radius:var(--radius);transition:background-color .25s,color .25s} @media (hover:hover){.di-nav a:hover,.di-nav__sous > button:hover{color:var(--ink)}} .di-nav a[aria-current],.di-nav__sous.is-actif > button{background:var(--ink);color:var(--paper)} @media (hover:hover){.di-nav a[aria-current]:hover,.di-nav__sous.is-actif > button:hover{color:var(--paper)}} /* CTA masqué sous 360 px : le burger reste dans la fenêtre à 320 px (le CTA est aussi dans le menu). Sélecteur à 2 classes : .di-btn (plus bas) posait display:inline-flex et gagnait sur ce masquage. */ .di-header .di-header__cta{display:none} @media (min-width:360px){.di-header .di-header__cta{display:inline-flex}} @media (min-width:960px){.di-header .di-burger{display:none}} @media (min-width:960px) and (max-width:1099px){.di-nav a,.di-nav__sous > button{padding:0 7px;letter-spacing:.08em}} /* sous-menu Communes : clic, Échap, clic dehors (choreo.js) ; survol en CSS */ .di-nav__sous{position:relative} .di-nav__sous > button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)} .di-nav__sous.is-ouvert > button svg{transform:rotate(180deg)} .di-nav__liste{display:none;position:absolute;left:0;top:100%;min-width:300px;padding-top:12px;z-index:5;isolation:isolate} /* filets PLEINS (mélange Ink 12 % sur papier) : avec var(--hair), translucide, les lettres du h1 passaient entre les liens */ .di-nav__liste ul{display:grid;gap:1px;padding:1px;background:#D7D9DD;background:color-mix(in srgb,var(--ink) 12%,var(--paper));border-radius:var(--radius)} .di-nav .di-nav__liste a{display:flex;width:100%;min-height:44px;padding:0 14px;background:var(--paper);border-radius:0;color:var(--ink);font:500 .9375rem/1.2 var(--font);letter-spacing:0;text-transform:none} @media (hover:hover){.di-nav .di-nav__liste a:hover{background:var(--blanc)}} .di-nav .di-nav__liste a[aria-current]{background:var(--ink);color:var(--paper)} .di-nav__sous.is-ouvert .di-nav__liste{display:block} @media (hover:hover){.di-nav__sous:hover .di-nav__liste{display:block}} html:not(.di-choreo) .di-nav__sous:focus-within .di-nav__liste{display:block} /* bouton icône (burger, fermer) */ .di-icone{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--hair);border-radius:var(--radius);color:var(--ink);touch-action:manipulation;transition:border-color .25s,background-color .25s,scale .12s} .di-icone:active{scale:.94} .di-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.di-icone:hover{border-color:var(--hair-strong);background:var(--blanc)}} /* ── Menu burger : popover natif plein écran (pages puis sections) ── */ .di-menu{display:none;position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;flex-direction:column} .di-menu:popover-open{display:flex} .di-menu.is-ouvert{display:flex;z-index:300} .di-menu::backdrop{background:transparent} @media (prefers-reduced-motion:no-preference){.di-menu:popover-open{animation:di-menu-entre .35s var(--ease)}} @keyframes di-menu-entre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .di-menu__haut{flex:none;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gouttiere);border-bottom:1px solid var(--hair)} .di-menu__corps{flex:1;display:grid;align-content:start;gap:32px;padding:24px var(--gouttiere) calc(28px + env(safe-area-inset-bottom,0px))} .di-menu__nav{display:grid;gap:10px;align-content:start} .di-menu__nav > .di-pastille{justify-self:start;margin-top:12px} .di-menu__nav > .di-pastille:first-child{margin-top:0} .di-menu__pages{border-top:1px solid var(--hair)} .di-menu__pages a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 4px;border-bottom:1px solid var(--hair);font:600 clamp(1.375rem,1.1rem + 1.3vw,1.875rem)/1.1 var(--font);letter-spacing:-.025em} .di-menu__pages--sous a{min-height:46px;padding-left:22px;font-size:1.0625rem;font-weight:500;letter-spacing:-.01em} .di-menu__pages a[aria-current],.di-menu__sections a.is-actif{background:var(--ink);color:var(--paper);padding-inline:10px} .di-menu__pages--sous a[aria-current]{padding-left:22px} .di-menu__sections{display:grid;gap:10px;align-content:start} .di-menu__sections > .di-pastille{justify-self:start} .di-menu__sections ol{border-top:1px solid var(--hair)} .di-menu__sections a{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 4px;border-bottom:1px solid var(--hair);color:var(--gray)} .di-menu__sections a .di-mono{color:var(--gray)} .di-menu__sections a.is-actif .di-mono{color:inherit} .di-menu__pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px} .di-menu__pied a:not(.di-btn){display:inline-flex;align-items:center;min-height:44px;font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--ink)} html.di-menu-ouvert{overflow:hidden} @media (min-width:720px){ .di-menu__corps{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:56px} .di-menu__pied{grid-column:1 / -1} } /* ── Sélecteur de langue (dormant par défaut, voir chrome.js) ──────── */ .di-langs{display:flex;align-items:center;margin-right:6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em} .di-langs button{min-height:44px;padding:0;margin:0;max-width:0;overflow:hidden;opacity:0;pointer-events:none;white-space:nowrap;color:var(--gray);transition:max-width .4s var(--ease),margin .4s var(--ease),opacity .28s ease,color .22s ease} @media (hover:hover){.di-langs button:hover{color:var(--ink)}} .di-langs[data-open="false"] button[aria-pressed="true"]{max-width:3.5em;opacity:1;pointer-events:auto;color:var(--ink)} .di-langs[data-open="false"] button[aria-pressed="true"]::after{content:"";display:inline-block;width:4px;height:4px;margin-left:6px;vertical-align:middle;background:var(--lagon)} .di-langs[data-open="true"] button{max-width:3.5em;opacity:1;margin-left:12px;pointer-events:auto} .di-langs[data-open="true"] button:first-child{margin-left:0} .di-langs[data-open="true"] button[aria-pressed="true"]{color:var(--ink)} /* ── Section chorégraphiée : guides, eyebrow collant, croix ───────── */ .di-section{position:relative;background:var(--fond);color:var(--texte)} .di-section__corps{position:relative;z-index:1;padding:clamp(48px,7vw,104px) 0 clamp(56px,8vw,120px)} .di-guides{position:absolute;inset:0;pointer-events:none;z-index:0} .di-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--filet);transform-origin:top} .di-guide--g{left:0} .di-guide--d{right:0} /* sections sous le pli : rendu différé ; hauteur estimée par --cv-h (bureau) et --cv-h-m (< 960 px) */ .di-section:not(.di-hero){content-visibility:auto;contain-intrinsic-size:auto var(--cv-h,1000px)} @media (max-width:959px){.di-section:not(.di-hero){contain-intrinsic-size:auto var(--cv-h-m,var(--cv-h,1200px))}} .di-eyebrow{position:sticky;top:var(--header-h);z-index:20;background:var(--voile);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .di-eyebrow__filet{position:absolute;left:0;right:0;height:1px;background:var(--filet);transform-origin:left;pointer-events:none} .di-eyebrow__filet--h{top:0} .di-eyebrow__filet--b{bottom:0} .di-eyebrow__ligne{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--eyebrow-h);color:var(--sourd)} .di-eyebrow__g{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texte)} .di-eyebrow__g b{font-weight:500} .di-eyebrow__g b::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;vertical-align:1px;background:var(--accent)} .di-eyebrow__d{white-space:nowrap} @media (max-width:719px){.di-eyebrow__d{display:none}} @media (max-width:419px){.di-eyebrow__g{letter-spacing:.07em}} /* croix 11 × 11 px aux intersections de filets */ .di-croix{position:absolute;width:11px;height:11px;z-index:3;pointer-events:none} .di-croix::before,.di-croix::after{content:"";position:absolute;background:var(--croix)} .di-croix::before{left:0;right:0;top:5px;height:1px} .di-croix::after{top:0;bottom:0;left:5px;width:1px} .di-croix--hg{left:-5px;top:-5px} .di-croix--hd{right:-5px;top:-5px} .di-croix--bg{left:-5px;bottom:-5px} .di-croix--bd{right:-5px;bottom:-5px} .di-tete{display:grid;gap:20px;max-width:54rem;margin-bottom:clamp(36px,5vw,60px)} .di-tete .di-lead{max-width:60ch} /* ── Grille jointive : gap 1 px = filet, coins 2 px, pas d'ombre ──── */ .di-cadre{position:relative;container-type:inline-size} .di-cadre + .di-cadre{margin-top:clamp(32px,4vw,56px)} .di-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding:1px;background:var(--filet);border-radius:var(--radius);overflow:clip} .di-cellule{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--fond);color:var(--texte);transition:background-color .3s} @media (hover:hover){a.di-cellule:hover,.di-cellule--survol:hover{background:var(--fond-survol)}} .di-cellule--toute{grid-column:1 / -1} .di-pad{padding:clamp(22px,2.8vw,36px)} .di-pad > * + *{margin-top:14px} .di-pad > .di-cellule__bas{margin-top:auto;padding-top:22px} .di-pad:has(> .di-cellule__bas){display:flex;flex-direction:column;flex:1} .di-num{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--texte)} .di-num::after{content:"";flex:1;height:1px;background:var(--filet)} .di-grille--4{grid-template-columns:repeat(2,minmax(0,1fr))} @container (min-width:600px){ .di-grille--2,.di-grille--3{grid-template-columns:repeat(2,minmax(0,1fr))} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute){grid-column:1 / -1} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute) .di-visuel{aspect-ratio:21 / 8} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute) .di-visuel--photo{aspect-ratio:auto} .di-grille--4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* cellule photo étalée sur deux colonnes (600–899 px) : recadrage panoramique */ @container (min-width:600px) and (max-width:899.98px){ .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute) .di-visuel--photo > img{aspect-ratio:21 / 9} } @container (min-width:900px){ .di-grille--3{grid-template-columns:repeat(3,minmax(0,1fr))} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute){grid-column:auto} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute) .di-visuel{aspect-ratio:4 / 3} .di-grille--3 > :last-child:nth-child(odd):not(.di-cellule--toute) .di-visuel--photo{aspect-ratio:auto} } /* ── Visuels : emplacement d'image (IA plus tard), picto en attendant ─ */ .di-visuel{position:relative;display:grid;place-items:center;aspect-ratio:4 / 3;margin:0;overflow:hidden;background-color:var(--fond);background-image:radial-gradient(var(--filet-fort) 1px,transparent 1.4px);background-size:18px 18px;background-position:9px 9px;border-bottom:1px solid var(--filet)} .di-visuel > img,.di-visuel > picture,.di-visuel > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .di-visuel .di-picto{position:relative;z-index:1;width:min(46%,180px);height:auto} .di-visuel figcaption{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;display:flex;justify-content:space-between;gap:12px;color:var(--sourd)} .di-visuel--carre{aspect-ratio:1} /* variante photo : le ratio vient des attributs width/height de l' (3:4), le picto se dessine dans un cartouche, la légende passe en pastille en haut */ .di-visuel--photo{display:block;aspect-ratio:auto;background-image:none} .di-visuel.di-visuel--photo > img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:cover} .di-visuel__picto{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:76px;height:76px;background:var(--fond);border:1px solid var(--filet);border-radius:var(--radius)} .di-visuel .di-visuel__picto .di-picto{width:56px;height:56px;stroke-width:2.1} .di-visuel--photo figcaption{left:12px;right:auto;top:12px;bottom:auto;padding:6px 9px;background:var(--fond);border:1px solid var(--filet);border-radius:var(--radius);color:var(--texte)} /* pictos au trait : un seul trait d'accent (.di-picto__a) par picto */ .di-picto{display:block;fill:none;stroke:var(--texte);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible} .di-picto .di-picto__a{stroke:var(--accent)} .di-picto--s{width:52px;height:52px;stroke-width:2.2} .di-picto--m{width:72px;height:72px;stroke-width:1.9} /* ── Icônes Lucide (lucide.dev, ISC) : tools/icones.mjs → svg.di-icone ── Seule famille d'icônes du site (pictos dessinés main retirés le 17/10). Trait 1,5 dans la grille 24 et couleur currentColor portés par le

rempli par chrome.js ─ Conçu pour un bloc Ink (papier sur Ink, filets clairs) ; ses couleurs suivent les rôles --texte / --sourd / --filet-fort, donc il tient aussi sur papier. Champ et bouton 48 px. Contrat et textes : assets/v2/LISEZMOI.md. */ .di-rappel{display:block;width:100%;max-width:30rem;container-type:inline-size} .di-rappel__form{position:relative;display:grid;gap:14px;padding:clamp(18px,2.6vw,26px);border:1px solid var(--filet-fort);border-radius:var(--radius);color:var(--texte)} .di-rappel__form::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:2px;background:var(--accent)} .di-rappel__champs{display:grid;gap:14px} .di-rappel__label{font:600 1.125rem/1.3 var(--font);letter-spacing:-.01em;text-wrap:balance} .di-rappel__ligne{display:grid;gap:10px} @container (min-width:400px){.di-rappel__ligne{grid-template-columns:minmax(0,1fr) auto}} .di-rappel__tel{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--filet-fort);border-radius:var(--radius);background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s} .di-rappel__tel::placeholder{color:var(--gray);opacity:1} .di-rappel__tel:focus-visible{outline-offset:2px;border-color:var(--lagon)} .di-rappel__tel[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 2px rgba(180,35,24,.35)} .di-encre .di-rappel__tel[aria-invalid="true"]{border-color:#FFB4A8;box-shadow:0 0 0 2px rgba(255,180,168,.4)} .di-rappel .di-btn{min-height:48px;padding:0 20px} .di-rappel__consent{align-items:flex-start;gap:12px;padding-block:2px;font-size:.875rem;line-height:1.5;color:var(--sourd)} .di-rappel__consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--lagon)} .di-rappel__consent a{color:var(--texte);text-decoration:underline;text-decoration-color:var(--lagon);text-decoration-thickness:1.5px;text-underline-offset:3px} .di-rappel__piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} .di-rappel__statut{margin:0;font-weight:500;line-height:1.5;color:var(--texte)} .di-rappel__statut:empty{display:none} .di-rappel__statut:focus{outline:none} .di-rappel__statut a{text-decoration:underline;text-underline-offset:3px} .di-rappel__statut[data-ton="erreur"]{color:#B42318} .di-encre .di-rappel__statut[data-ton="erreur"]{color:#FFB4A8} .di-rappel__statut[data-ton="ok"]{display:flex;align-items:center;gap:12px} .di-rappel__ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .di-rappel[data-etat="ok"] .di-rappel__champs{display:none} /* ── Pied de page : signature, grille à filets, communes, mentions ── */ .di-pied{position:relative;background:var(--paper);color:var(--ink);border-top:1px solid var(--hair)} .di-pied__in{padding:clamp(44px,6vw,80px) 0 0} .di-pied__signature{display:grid;gap:18px;align-items:end;padding-bottom:clamp(28px,4vw,44px)} @media (min-width:860px){.di-pied__signature{grid-template-columns:minmax(0,1fr) auto}} .di-pied__logo{font:600 clamp(2.25rem,1.5rem + 3vw,4rem)/.95 var(--font);letter-spacing:-.045em} .di-pied__logo span{color:var(--lagon)} .di-pied__tag{max-width:46ch;margin-top:14px;color:var(--gray);font-size:1rem;line-height:1.55;text-wrap:pretty} .di-pied__grille{grid-template-columns:minmax(0,1fr)} @container (min-width:560px){.di-pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}} @container (min-width:960px){.di-pied__grille{grid-template-columns:repeat(4,minmax(0,1fr))}} .di-pied__col{padding:22px clamp(18px,2vw,26px) 24px} .di-pied h2{margin-bottom:10px;font:500 var(--fs-mono)/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)} /* page qui finit par un bloc Ink : pas de rangée signature + bouton (chrome.js), seulement les colonnes */ .di-pied--court .di-pied__in{padding-top:clamp(28px,4vw,48px)} /* colonnes en

: ouvertes et inertes dès 720 px (rendu inchangé), repliées dessous (chrome.js, synchroniserPied) */ .di-pied__det > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:default;-webkit-tap-highlight-color:transparent} .di-pied__det > summary::-webkit-details-marker{display:none} .di-pied__chev{display:none;width:16px;height:16px;flex:none;fill:none;stroke:var(--gray);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)} .di-pied__det[open] > summary .di-pied__chev{transform:rotate(180deg)} @media (min-width:720px){.di-pied__det > summary{pointer-events:none}} @media (max-width:719.98px){ .di-pied__col{padding:0 18px} .di-pied__det > summary{min-height:52px;cursor:pointer} .di-pied__det > summary h2{margin:0} .di-pied__det[open]{padding-bottom:16px} .di-pied__chev{display:block} } .di-pied li a,.di-pied li > span{display:inline-flex;align-items:center;min-height:34px;font-size:.9375rem;line-height:1.3;color:var(--ink)} .di-pied li > span{color:var(--gray)} @media (hover:hover){.di-pied a:not(.di-btn):hover{text-decoration:underline;text-decoration-color:var(--lagon);text-decoration-thickness:1px;text-underline-offset:4px}} .di-pied__ipi{margin-top:12px;font-size:.8125rem;line-height:1.55;color:var(--gray);text-wrap:pretty} .di-pied__ipi a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:3px} .di-pied__sig{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)} .di-pied__sig img{width:48px;height:48px;flex:none} .di-pied__sig b{display:block;font-weight:600;font-size:.9375rem} .di-pied__sig span{display:block;font-size:.8125rem;color:var(--gray)} .di-pied__col .di-btn{margin-top:16px} /* index des communes : repli sous 640 px (les liens restent dans le DOM) */ .di-pied__index{margin-top:clamp(28px,4vw,44px)} .di-pied__indexhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px} .di-pied__indexhead h2{margin:0} .di-pied__toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--hair-strong);border-radius:var(--radius);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase} .di-pied__toggle svg{width:11px;height:7px;transition:transform .3s var(--ease)} .di-pied__index[data-open="true"] .di-pied__toggle svg{transform:rotate(180deg)} .di-pied__zone{padding:18px clamp(18px,2vw,26px) 20px} .di-pied__zone h3{margin-bottom:8px;font:500 var(--fs-mono)/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)} .di-pied__communes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px} .di-pied__communes a{display:inline-flex;align-items:center;min-height:32px;font-size:.875rem;color:var(--ink)} @media (max-width:639px){ .di-pied__toggle{display:inline-flex} .di-pied__index[data-open="false"] .di-pied__zones{display:none} } .di-pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:22px 0 calc(28px + env(safe-area-inset-bottom,0px));color:var(--gray)} /* ── Barre « Appeler / Estimer » (chrome.js) : sous 960 px, fixe en bas, deux cibles de 48 px. Apparaît après un écran de défilement ; masquée sur un bloc Ink, sur le pied, sur /estimation/ et /contact/ (non injectée). Cachée = hors écran + visibility:hidden (pas de focus au clavier). ──── */ .di-barre{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px var(--gouttiere);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--voile);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair);visibility:hidden;transform:translateY(105%);transition:transform .5s var(--ease-trace),visibility 0s linear .5s} .di-barre.is-on{visibility:visible;transform:none;transition-delay:0s} @media (max-width:959.98px){.di-barre{display:grid}} .di-barre a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--radius);font:500 1rem/1 var(--font);white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:scale .12s ease} .di-barre a:active{scale:.97} .di-barre__tel{background:var(--ink);color:var(--paper)} .di-barre__estim{background:transparent;color:var(--ink)} .di-barre__ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* ── Rail de droite (construit par choreo.js, masqué < 960 px) ────── */ .di-rail{display:none} @media (min-width:960px){.di-rail{display:block;position:fixed;top:0;right:0;bottom:0;width:var(--rail-l);z-index:30;pointer-events:none}} .di-rail__ligne{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);transform-origin:top} .di-rail__cadre{position:absolute;inset:0;overflow:hidden} .di-rail__regle{position:absolute;top:0;left:0;right:0;will-change:transform;background-image:repeating-linear-gradient(to bottom,rgba(16,20,24,.32) 0 1px,transparent 1px 100px),repeating-linear-gradient(to bottom,var(--gray) 0 1px,transparent 1px 500px);background-size:7px 100%,13px 100%;background-repeat:no-repeat;background-position:1px 0,1px 0} .di-rail__num{position:absolute;left:17px;font:400 11px/1 var(--mono);color:var(--ink);opacity:.55;transform:translateY(-50%);font-variant-numeric:tabular-nums} .di-rail__index{position:absolute;right:calc(100% + var(--rail-gap));top:calc(var(--header-h) + 120px);width:var(--rail-index);pointer-events:auto;transition:transform .35s var(--ease)} .di-rail__index li{position:relative;height:20px;transition:height .35s var(--ease)} @media (max-width:1199px){.di-rail__index{display:none}} .di-rail__index a{display:block;position:relative;height:100%} .di-rail__m,.di-rail__s{position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);transition:opacity .35s var(--ease),transform .35s var(--ease)} .di-rail__m{font:400 var(--fs-mono)/20px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.5} .di-rail__s{font:600 18px/30px var(--font);letter-spacing:-.02em;opacity:0;transform:translateY(8px)} .di-rail__index li.is-actif{height:30px} .di-rail__index li.is-actif .di-rail__m{opacity:0;transform:translateY(-8px)} .di-rail__index li.is-actif .di-rail__s{opacity:1;transform:none} @media (hover:hover){.di-rail__index a:hover .di-rail__m{opacity:.9}} .di-rail__nom{position:absolute;right:0;width:26px;top:50%;height:300px;margin-top:-150px;overflow:hidden} .di-rail__vn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;white-space:nowrap;font:400 var(--fs-mono)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(48px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .di-rail__vn.is-cur{opacity:.5;transform:none} .di-rail__vn.is-sort{opacity:0;transform:translateY(-48px)} .di-rail__nom[data-sens="haut"] .di-rail__vn:not(.is-cur):not(.is-sort){transform:translateY(-48px)} .di-rail__nom[data-sens="haut"] .di-rail__vn.is-sort{transform:translateY(48px)} @media (prefers-reduced-motion:no-preference){ .di-rail .di-rail__ligne{transform:scaleY(0)} .di-rail .di-rail__index,.di-rail .di-rail__regle{opacity:0} .di-rail.is-on .di-rail__ligne{transform:none;transition:transform .9s var(--ease)} .di-rail.is-on .di-rail__index,.di-rail.is-on .di-rail__regle{opacity:1;transition:opacity .6s var(--ease) .3s,transform .35s var(--ease)} } @media (prefers-reduced-motion:reduce){.di-rail__index,.di-rail__index li,.di-rail__m,.di-rail__s,.di-rail__vn{transition:none!important}} /* ── Chorégraphie : états initiaux seulement avec JS (html.js), joués par .is-in sur la section ; ordre filets → croix → eyebrow → révélations ; délai porté par --d (posé par choreo.js) ──────────── */ @media (prefers-reduced-motion:no-preference){ html.js [data-choreo] [data-draw-rule]{transform:scaleX(0)} html.js [data-choreo] [data-draw-rule][data-axe="y"]{transform:scaleY(0)} html.js [data-choreo] [data-draw-tick]{opacity:0;transform:scale(.6)} html.js [data-choreo] [data-draw-eyebrow]{opacity:0;clip-path:inset(0 100% 0 0)} html.js [data-choreo] [data-reveal]:not(:is(h1,h1 *,.di-hero figure.di-visuel--photo)){opacity:0;transform:translateY(18px)} html.js [data-choreo] .di-portrait::before{transform:scaleX(0)} html.js [data-choreo] .di-portrait img{transform:scale(1.06)} html.js [data-choreo].is-in [data-draw-rule]{transform:none;transition:transform .7s var(--ease) var(--d,0ms)} html.js [data-choreo].is-in [data-draw-tick]{opacity:1;transform:none;transition:opacity .25s var(--ease) var(--d,0ms),transform .25s var(--ease) var(--d,0ms)} html.js [data-choreo].is-in [data-draw-eyebrow]{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease) var(--d,0ms),opacity .3s linear var(--d,0ms)} html.js [data-choreo].is-in [data-reveal]:not(:is(h1,h1 *,.di-hero figure.di-visuel--photo)){opacity:1;transform:none;transition:opacity .65s var(--ease) var(--d,0ms),transform .65s var(--ease) var(--d,0ms)} /* h1 et photo du hero (candidats au LCP) : jamais à opacity:0 en attendant le JS. Entrée en CSS pur dès le premier rendu, 0,6 s : départ à 40 % d'opacité, le texte se lit dès la première image ; lignes du h1 décalées de 70 ms. choreo.js n'y touche pas. */ h1[data-reveal],h1 [data-reveal]{animation:di-h1-entree .6s var(--ease) both} .di-hero figure.di-visuel--photo[data-reveal]{animation:di-h1-entree .6s var(--ease) .1s both} h1 [data-reveal]:nth-child(2){animation-delay:70ms} h1 [data-reveal]:nth-child(3){animation-delay:140ms} h1 [data-reveal]:nth-child(n+4){animation-delay:210ms} html.js [data-choreo].is-in .di-portrait::before{transform:none;transition:transform .9s var(--ease-trace) .5s} html.js [data-choreo].is-in .di-portrait img{transform:none;transition:transform 1.6s var(--ease) .2s} /* photos des visuels : fondu + légère montée à l'entrée dans l'écran. html.di-visuels n'est posée par choreo.js qu'une fois l'observateur en place (sinon tout reste visible). */ html.di-visuels .di-visuel--photo > img{opacity:0;transform:translateY(16px) scale(1.02)} html.di-visuels .di-visuel--photo.is-vu > img{opacity:1;transform:none;transition:opacity .9s var(--ease) .1s,transform 1.3s var(--ease) .1s} /* photo du hero (au-dessus de la ligne de flottaison, candidate au LCP) : pas de fondu d'image, elle s'affiche dès qu'elle est décodée (le cadre entre en CSS pur, voir plus bas) */ html.di-visuels .di-hero .di-visuel--photo > img{opacity:1;transform:none} /* pictos [data-draw-svg] : choreo.js mesure chaque trait (--len) puis pose .is-trace */ html.js .di-picto .di-trace{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)} html.js .di-picto.is-trace .di-trace{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s var(--ease-trace) var(--d,0ms)} /* icônes Lucide [data-draw-svg] : même tracé, mesuré par choreo.js */ html.js svg.di-icone .di-trace{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)} html.js svg.di-icone.is-trace .di-trace{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s var(--ease-trace) var(--d,0ms)} /* frise : trait au défilement, jalons éteints tant qu'ils ne sont pas atteints */ html.di-choreo .di-frise.is-vivant .di-frise__plein{transform:scaleY(0)} html.di-choreo .di-frise.is-vivant:not(.is-fini) .di-frise__tete{opacity:1} html.di-choreo .di-frise.is-vivant .di-frise__item:not(.is-allume) .di-frise__noeud{border-color:var(--filet-fort);background:var(--fond)} html.di-choreo .di-frise.is-vivant .di-frise__item:not(.is-allume) .di-frise__noeud svg path{stroke-dashoffset:1} html.di-choreo .di-frise.is-vivant .di-frise__item:not(.is-allume) .di-frise__n{color:var(--sourd)} html.di-choreo .di-frise.is-vivant .di-frise__item:not(.is-allume) .di-frise__quoi{opacity:.38;transform:translateX(6px)} html.di-choreo .di-frise.is-vivant .di-frise__item.is-allume .di-frise__noeud{animation:di-noeud .8s var(--ease)} html.di-choreo .di-frise.is-vivant .di-frise__noeud svg path{transition:stroke-dashoffset .5s var(--ease) .15s} html.di-choreo .di-frise.is-vivant .di-frise__n{transition:color .4s} } @keyframes di-h1-entree{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes di-noeud{0%{box-shadow:0 0 0 0 rgba(21,158,145,.5)}100%{box-shadow:0 0 0 14px rgba(21,158,145,0)}} /* mobile : révélations par la timeline de défilement (CSS seul), repli IntersectionObserver */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference) and (max-width:959px){ html.js [data-choreo] [data-reveal]:not(:is(h1,h1 *,.di-hero figure.di-visuel--photo)){opacity:1;transform:none;transition:none;animation:di-apparait linear both;animation-timeline:view();animation-range:entry 0% entry 40%} } } @keyframes di-apparait{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ── Secours d'affichage ─────────────────────────────────────────────── Si le rendu ou IntersectionObserver est bloqué (vie privée, économie d'énergie, volet caché), choreo.js ne joue rien et les états initiaux ci-dessus cacheraient la page. Tant que html.di-anime manque (posée par choreo.js dès la 1re réponse d'un observateur), chaque élément caché reçoit, 3,5 s après le départ, une animation de 1 ms qui force l'état final (fill forwards ; l'animation l'emporte sur .is-in, dont elle a les valeurs finales). Quand tout marche, .di-anime arrive en moins d'une seconde et ces règles ne s'appliquent plus ; avant la fin du délai elles ne posent aucune valeur : la chorégraphie normale (.is-in, transitions, délais --d) n'est jamais touchée. */ @keyframes di-secours{to{opacity:1;transform:none}} @keyframes di-secours-oeil{to{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes di-secours-trait{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:no-preference){ html.js:not(.di-anime) [data-choreo] [data-draw-rule], html.js:not(.di-anime) [data-choreo] [data-draw-tick], html.js:not(.di-anime) [data-choreo] [data-reveal]:not(:is(h1,h1 *,.di-hero figure.di-visuel--photo)), html.js:not(.di-anime) [data-choreo] .di-portrait::before, html.di-visuels:not(.di-anime) .di-visuel--photo:not(.is-vu) > img{animation:di-secours 1ms linear 3.5s 1 forwards} html.js:not(.di-anime) [data-choreo] [data-draw-eyebrow]{animation:di-secours-oeil 1ms linear 3.5s 1 forwards} html.js:not(.di-anime) .di-picto:not(.is-trace) .di-trace{animation:di-secours-trait 1ms linear 3.5s 1 forwards} html.js:not(.di-anime) svg.di-icone:not(.is-trace) .di-trace{animation:di-secours-trait 1ms linear 3.5s 1 forwards} } /* mobile avec timeline de défilement : le reveal par défilement est gardé, le secours s'y ajoute */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference) and (max-width:959.98px){ html.js:not(.di-anime) [data-choreo] [data-reveal]:not(:is(h1,h1 *,.di-hero figure.di-visuel--photo)){animation:di-apparait linear both,di-secours 1ms linear 3.5s 1 forwards;animation-timeline:view(),auto;animation-range:entry 0% entry 40%,normal} } } /* ceinture : en mouvement réduit, rien ne bouge, tout est dans son état final */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important} } /* ── Cibles tactiles ≥ 44 px, écran tactile seulement ──────────────── Sous (pointer: coarse) uniquement : le rendu PC ne bouge pas. */ @media (pointer:coarse){ .di-btn--petit{min-height:44px} .di-nav a,.di-nav__sous > button{min-height:44px} .di-pied li a,.di-pied li > span{min-height:44px} .di-pied__communes a{min-height:44px} .di-pied__bas a{display:inline-flex;align-items:center;min-height:44px} .di-menu__sections a{min-height:52px} main p a:not([class]){padding-block:12px} }