/* Almil Agentic — maquette intégrée · banque bichromie posée sur la maquette v2 stricte (style.css).
   Choix validés : accueil « surimpression » (+ isobathes légères sur ordinateur), solutions « démarche illustrée »,
   transition « ventouses », à propos « calage », contact « relevé et cartouche », pied « l'œil ».
   Règles : texte courant papier sur Klein ou Klein sur papier ; l'écarlate ne porte que des aplats, des figures,
   des repères et du texte papier de 26 px et plus. Aucune transparence : pas de tons intermédiaires. */

:root{--ecarlate:#FF2400;--surimp:#3A0F3F;--decal:0.3125rem}
@supports (color: color(display-p3 1 1 1)){:root{--ecarlate:color(display-p3 1 0.18 0)}}
html.gris{--ecarlate:#9a9a9a;--surimp:#555}

/* ---------- KIT COMMUN ---------- */
/* Aplats Klein unis : pas de grain d'encre (à propos, pied de page, menu mobile) */
/* Repères : numéro encadré d'écarlate, comme une marque de calage */
.label span{border-color:var(--ecarlate)}
/* Boutons : aplat ou contour Klein, ombre écarlate décalée ; au survol le bouton « rentre » dans son ombre */
.btn,.btn-ambre{box-shadow:var(--decal) var(--decal) 0 var(--ecarlate);transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn{background:var(--papier)}
.btn:hover,.btn-ambre:hover{transform:translate(2px,2px);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate);filter:none}
.nav__cta{box-shadow:0.25rem 0.25rem 0 var(--ecarlate)}
.nav__layer--bleu .nav__cta{background:var(--papier)}
/* Listes : filets pointillés (banque 07 · pointillé) */
.sol__etapes li,.brief__liste li{border-bottom:1px dotted var(--bleu)}
.projets{border-top:1px dotted var(--papier)}
.projets li{border-bottom:1px dotted var(--papier)}
/* Cartes : coins écarlates (banque 08 · cadrages) */
.sol__carte::before{background:
   linear-gradient(var(--ecarlate),var(--ecarlate)) top left/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) top left/2px 1.5rem no-repeat,
   linear-gradient(var(--ecarlate),var(--ecarlate)) top right/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) top right/2px 1.5rem no-repeat,
   linear-gradient(var(--ecarlate),var(--ecarlate)) bottom left/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) bottom left/2px 1.5rem no-repeat,
   linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/2px 1.5rem no-repeat}
/* Images tramées : jamais lissées */
.hero__iso,.hero__surimp,.etape__vignette,.bande,.media--portrait img,.footer__oeil,#contact{image-rendering:pixelated}
/* ---------- ACCUEIL · regard ---------- */
/* Une planche d'histoire naturelle sur papier : la pieuvre en deux passages d'encre (banque 13), en gros plan
   (× 1,5, cellules de trame de 3 px), sans les morceaux de bras flottants. Fond (ordinateur) : les isobathes du
   contact, lignes allégées, seules les fosses teintées d'une trame Klein très légère (4, 7, 10 %). */
.hero{background:var(--papier);color:var(--bleu)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bleu)}
.media--cover{overflow:hidden}
.hero__iso{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* cadrage calé sur la hauteur de l'écran (1440 × 900 : 1800 × 2250 px, à −270 px du bord droit, −335 px en haut) */
.hero__surimp{position:absolute;right:-30vh;top:-37.2vh;height:250vh;width:auto;max-width:none}
.hero__title,.hero__scroll{color:var(--bleu)}
/* l'accroche en écarlate : jamais sous 24 px (règle de la charte pour l'écarlate sur papier) */
.hero__sub{color:var(--ecarlate);font-size:clamp(1.5rem,1.8vw,1.625rem)}
.hero__legende{position:absolute;right:var(--gutter);bottom:clamp(6rem,14vh,10rem);margin:0;text-align:right;font:400 0.625rem/1.8 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.hero__legende i{display:inline-block;width:0.5rem;height:0.5rem;background:var(--ecarlate);margin-right:0.625rem;vertical-align:1px}
/* écrans en 4/3 (tablettes à l'horizontale, petits portables) : la pieuvre glisse vers la gauche pour libérer le menu */
@media (min-width:761px) and (min-aspect-ratio:5/4) and (max-aspect-ratio:3/2){
  .hero__surimp{right:-2vh;top:-18vh;height:195vh}
}
/* écrans plus hauts que larges (tablettes en portrait) : le même cadrage, calé sur la largeur */
@media (min-width:761px) and (max-aspect-ratio:5/4){
  .hero__surimp{right:-18.75vw;top:-23.25vw;height:156.25vw}
}

/* ---------- SOLUTIONS · démarche illustrée ---------- */
.sol__video{box-shadow:var(--decal) var(--decal) 0 var(--ecarlate)}
.sol__carte#sur-mesure > p:not(.label){margin-bottom:0.875rem}
.sol__etapes--3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.25rem;border-top:0}
.sol__etapes--3 li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:0.625rem;align-content:start;padding:0 0 0.75rem;font-size:0.875rem}
.etape__vignette{grid-column:1/-1;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin:0 0 0.625rem;border-bottom:1px dotted var(--bleu);padding-bottom:0.375rem}
.sol__etapes--3 span{grid-row:2;align-self:center}
.sol__etapes--3 b{grid-row:2;width:auto;font-size:1.1875rem}
.etape__txt{grid-column:1/-1;grid-row:3;margin-top:0.25rem;font-size:inherit;line-height:1.35}

/* ---------- TRANSITION · ventouses ---------- */
/* Gros plan de la gravure (banque 01), agrandi au double exact : 1440 × 300 px */
/* Le tentacule est montré entier, avec son fondu naturel (dense en haut, il s'efface vers le bas) :
   il pend du bord haut d'À propos et le contenu vient se poser dans le fondu (option A, 22/10/2026).
   Option B, s'il faut y revenir : bottom:0 au lieu de top:0, .bande{transform:scaleY(-1)}, et la marge passe en bas. */
#a-propos{position:relative}
#a-propos > .wrap{position:relative;z-index:1;padding-top:clamp(6rem,18vw,16.25rem)}
.media--band{position:absolute;left:0;right:0;top:0;height:auto;margin:0;z-index:0;background:none}
.bande{width:100%;height:auto;object-fit:fill}

/* ---------- À PROPOS · calage ---------- */
/* Portraits sans filet, un aplat écarlate décalé derrière, comme une forme mal calée */
.media--portrait{border:0;box-shadow:0.75rem 0.75rem 0 var(--ecarlate);background:var(--bleu)}
.media--portrait.media--pointilliste img{filter:url(#portrait-trame-bicolore)}
.personne figcaption{margin-top:1.625rem}
/* resserré (22/10/2026) : titre plus petit, portraits un peu moins grands */
#a-propos{padding-bottom:clamp(3.5rem,6vw,5.5rem)}
#a-propos .section__head{margin-bottom:2.5rem}
#a-propos h2{font-size:clamp(2.5rem,4vw,3.625rem);margin-bottom:0.875rem}
#a-propos .lede{margin:0}
@media (min-width:1021px){.equipe{grid-template-columns:.68fr .68fr 1.3fr}}

/* ---------- CONTACT · relevé et cartouche ---------- */
/* Isobathes en encre pure sur papier (banque 13), les majeures en écarlate, sans voile ;
   le titre et le brief dans deux cartouches papier, comme la légende d'une carte marine */
#contact{background:var(--papier) url(img/isobathes-papier.png) center/cover no-repeat}
.contact{align-items:stretch}
.contact__intro{background:var(--papier);border:1px solid var(--bleu);padding:clamp(1.75rem,4vw,3rem);position:relative}
.contact__intro::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:
   linear-gradient(var(--ecarlate),var(--ecarlate)) top left/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) top left/2px 1.5rem no-repeat,
   linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/1.5rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/2px 1.5rem no-repeat}
.brief{box-shadow:0.625rem 0.625rem 0 var(--bleu)}
.contact__intro h2{font-size:clamp(2.5rem,4vw,4rem)}   /* le titre tient en deux lignes (22/10/2026) */

/* ---------- PIED DE PAGE · l'œil ---------- */
/* Le détail de l'œil (banque 01), motif du favicon, en pastille calée d'écarlate */
.footer{position:relative;overflow:hidden}
.footer{padding:clamp(3rem,5vw,4.5rem) 0 2rem}   /* resserré (22/10/2026) : 327 px de haut au lieu de 469 */
.footer__bas{position:relative;margin-top:3.5rem}
.footer__releve{opacity:1;width:calc(100% - 12.5rem)}
.footer__oeil{position:absolute;right:var(--gutter);bottom:-0.375rem;width:8.75rem;height:8.75rem;border-radius:50%;box-shadow:0.375rem 0.375rem 0 var(--ecarlate);background:var(--bleu)}

/* ---------- TÉLÉPHONE ---------- */
@media (max-width:760px){
  /* accueil : papier nu, la pieuvre en gros plan (retramée à × 0,75 : 900 px pour 375 px de large) */
  .hero__iso{display:none}
  .hero__surimp{right:auto;left:-80vw;top:-20.8vw;width:240vw;height:auto}
  .hero__sub{font-size:1.5rem;letter-spacing:.1em;line-height:1.35}
  .hero__legende{right:auto;left:var(--gutter);text-align:left;bottom:calc(clamp(6rem,14vh,10rem) + 12.25rem)}
  /* petits téléphones (iPhone SE…) : pieuvre un peu moins grande, légende retirée pour laisser respirer le titre */
  @media (max-height:700px){
    .hero__surimp{left:-63vw;top:-17vw;width:190vw}
    .hero__legende{display:none}
  }
  .sol__etapes--3{grid-template-columns:1fr;gap:0}
  .sol__etapes--3 li{grid-template-columns:7rem auto 1fr;grid-template-rows:auto auto;column-gap:0.875rem;padding:0.75rem 0;align-items:center;border-bottom:1px dotted var(--bleu)}
  .etape__vignette{grid-column:1;grid-row:1/3;margin:0;border:0;padding:0;width:7rem}
  .sol__etapes--3 span{grid-column:2;grid-row:1}
  .sol__etapes--3 b{grid-column:3;grid-row:1}
  .etape__txt{grid-column:2/-1;grid-row:2;margin:0}
  .footer__bas{margin-top:2rem}
  .footer__oeil{position:static;display:block;margin:0 0 1.5rem auto;width:6.5rem;height:6.5rem}
  .footer__releve{width:100%}
}

/* ---------- VUE NIVEAUX DE GRIS ---------- */
html.gris .hero{background:var(--papier)}
html.gris .hero .media{background:repeating-linear-gradient(45deg,#e2e2e2 0 0.75rem,#d8d8d8 0.75rem 1.5rem)}
html.gris #contact{background:var(--creme)}
html.gris .hero__legende i{background:#9a9a9a}
/* les images hors .media gardent leur place, remplacées par des hachures */
html.gris .etape__vignette,html.gris .footer__oeil{object-position:-624.9375rem 0;background:repeating-linear-gradient(45deg,#d4d4d4 0 0.5rem,#cbcbcb 0.5rem 1rem)}
html.gris .footer__oeil{background:repeating-linear-gradient(45deg,#4a4a4a 0 0.5rem,#444 0.5rem 1rem)}

/* ---------- ENTRÉE · intro.js ---------- */
/* Écran plein, au-dessus du menu et sous les outils de maquette ; pixels nets, encres pures */
.intro{position:fixed;inset:0;z-index:55;width:100%;height:100%;display:block;background:var(--bleu);image-rendering:pixelated}
.intro[hidden]{display:none}
html.intro-en-cours,html.intro-en-cours body{overflow:hidden}
.intro-cache{visibility:hidden!important}
.intro-sans-ombre{box-shadow:none!important}
/* une lettre en cours de défilement garde la largeur de sa lettre finale : la mise en page ne bouge pas */
.lettre{display:inline-block;text-align:center;white-space:pre}

/* ---------- VOLUME · relief3d.js (ordinateur seulement) ---------- */
/* Les canevas 3D prennent la place des images fixes ; sans 3D, les images restent */
canvas.a3d{image-rendering:pixelated}
canvas.a3d-net{image-rendering:auto}
/* les blocs de la démarche tournent au survol, et s'attrapent */
canvas.a3d-tourne{cursor:grab;touch-action:pan-y}
canvas.a3d-saisi{cursor:grabbing}
.a3d-cache{display:none!important}
.a3d-masque{visibility:hidden!important}
.etape__vignette.a3d{display:block;width:100%;height:auto;aspect-ratio:4/3}
#contact.a3d-actif{background-image:none}
.contact__relief{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#contact.a3d-actif > .wrap{position:relative;z-index:1}
html.gris .a3d{display:none!important}