/* ==========================================================================
   Signature — feuille de style (version commerciale)
   Écrite pour ce projet. Les mesures (tailles, marges, positions) ont été
   relevées sur la page affichée de la version de référence, puis exprimées
   ici dans une unité propre au projet : --px vaut 1 pixel d'une maquette de
   1440 px (ordinateur) ou de 375 px (téléphone).
   Sommaire : 1. Réglages  2. Base  3. Typographie  4. Habillage commun
   5. Accueil  6. Galerie  7. Études de cas  8. À propos  9. Contact
   10. Accessibilité
   ========================================================================== */

/* 1. Réglages ------------------------------------------------------------ */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-latin.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format("woff2")}

:root{
  --blanc:#FBFAF7;
  --bordeaux:#682B38;
  --rose:#F1DADC;
  --orange:#EB6543;
  --nuit:#4A1D27;
  --blanc-80:rgba(255,255,255,.8);
  --blanc-60:rgba(255,255,255,.6);
  --bordeaux-60:color-mix(in srgb,var(--bordeaux) 60%,transparent);
  --bordeaux-40:color-mix(in srgb,var(--bordeaux) 40%,transparent);
  --rose-80:color-mix(in srgb,var(--rose) 80%,transparent);
  --rose-60:color-mix(in srgb,var(--rose) 60%,transparent);
  --titre:"Outfit",system-ui,sans-serif;
  --texte:"Manrope",system-ui,sans-serif;
  --px:calc(100vw / 1440);
  /* glissements (courbes propres au projet) */
  --sortie:cubic-bezier(.08,.62,.18,1);
  --entree:cubic-bezier(.32,0,.86,.24);
  --bascule:cubic-bezier(.62,0,.08,1);
  --souple:cubic-bezier(.65,.05,.36,1);
  --doux:cubic-bezier(.22,.61,.36,1);
  /* échelle typographique : taille / interligne / approche, en px de maquette */
  --t0:250;--i0:226;--a0:-11.5;
  --t1:144;--i1:144;--a1:-5;
  --t2:52;--i2:64;--a2:-1.5;
  --t3:32;--i3:40;--a3:-.1;
  --t4:24;--i4:32;--a4:0;
  --tt:16;--it:24;--at:.1;
  --tp:14;--ip:21;--ap:.1;
  --tm:12;--im:16;--am:.1;
  --ta:16;--ia:16;--aa:0;
  --te:14;--ie:14;--ae:0;
  /* grille des pages d'étude : 12 colonnes, marges de 120 */
  --marge:calc(120 * var(--px));
  --goutte:calc(32 * var(--px));
  --colonnes:12;
}
@media (max-width:600px){
  :root{
    --px:calc(100vw / 375);
    --t0:96;--i0:96;--a0:-4.5;
    --t1:60;--i1:60;--a1:-1.5;
    --t2:29;--i2:34;--a2:-1;
    --t3:24;--i3:30;--a3:-.5;
    --t4:18;--i4:24;--a4:0;
    --tt:14;--it:21;--at:.1;
    --tp:14;--ip:21;--ap:.1;
    --tm:12;--im:16;--am:.1;
    --ta:16;--ia:16;--aa:0;
    --te:14;--ie:14;--ae:0;
    --marge:calc(30 * var(--px));
    --goutte:0px;
    --colonnes:10;
  }
}

/* 2. Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--titre);line-height:1.5;color:var(--rose);-webkit-font-smoothing:antialiased;scrollbar-width:none;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html::-webkit-scrollbar{display:none}
@media (max-width:699px){html{font-size:14px}}
@media (min-width:700px) and (max-width:999px){html{font-size:14px}}
@media (min-width:1000px) and (max-width:1199px){html{font-size:15px}}
@media (min-width:1200px) and (max-width:1599px){html{font-size:16px}}
@media (min-width:1600px) and (max-width:1919px){html{font-size:17px}}
@media (min-width:1920px) and (max-width:2399px){html{font-size:18px}}
@media (min-width:2400px){html{font-size:20px}}
body{margin:0;background:var(--blanc);color:var(--bordeaux);font-family:var(--texte);overflow-x:clip;overscroll-behavior:none;text-rendering:optimizeSpeed}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400;font-size:inherit}
p,figure,blockquote,dd,dl,ul,ol,li{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
img,svg,video{display:block;max-width:100%}
img{width:100%;height:auto;object-fit:cover;user-select:none}
svg{height:auto;fill:currentColor}
picture{display:block;width:100%;height:100%}
section,footer{position:relative}
section{margin-top:-1px}
[hidden]{display:none!important}
::selection{background:var(--blanc);color:var(--bordeaux)}
html.est-occupe{cursor:wait}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}

.site{position:relative}
.feuille{position:relative}
.voile-page{position:fixed;left:0;right:0;top:0;height:150vh;background:var(--bordeaux);pointer-events:none;visibility:hidden;z-index:1}
.contenu{position:relative}

/* 3. Typographie --------------------------------------------------------- */
.ty-0,.ty-1,.ty-2,.ty-3,.ty-4,.ty-t,.ty-p,.ty-m,.ty-a{font-family:var(--titre)}
.ty-0{font-size:calc(var(--t0)*var(--px));line-height:calc(var(--i0)*var(--px));letter-spacing:calc(var(--a0)*var(--px))}
.ty-1{font-size:calc(var(--t1)*var(--px));line-height:calc(var(--i1)*var(--px));letter-spacing:calc(var(--a1)*var(--px))}
.ty-2{font-size:calc(var(--t2)*var(--px));line-height:calc(var(--i2)*var(--px));letter-spacing:calc(var(--a2)*var(--px))}
.ty-3{font-size:calc(var(--t3)*var(--px));line-height:calc(var(--i3)*var(--px));letter-spacing:calc(var(--a3)*var(--px))}
.ty-4{font-size:calc(var(--t4)*var(--px));line-height:calc(var(--i4)*var(--px));letter-spacing:calc(var(--a4)*var(--px))}
.ty-t{font-size:calc(var(--tt)*var(--px));line-height:calc(var(--it)*var(--px));letter-spacing:calc(var(--at)*var(--px))}
.ty-p{font-size:calc(var(--tp)*var(--px));line-height:calc(var(--ip)*var(--px));letter-spacing:calc(var(--ap)*var(--px))}
.ty-m{font-size:calc(var(--tm)*var(--px));line-height:calc(var(--im)*var(--px));letter-spacing:calc(var(--am)*var(--px))}
.ty-a{font-size:calc(var(--ta)*var(--px));line-height:calc(var(--ia)*var(--px));letter-spacing:calc(var(--aa)*var(--px))}

/* lignes de titre révélées une à une */
.masque{display:block;overflow:hidden}
.ligne{display:block;transform-origin:0 0}
.js .ligne{visibility:hidden}
.masque-titre{height:calc(145 * var(--px));line-height:calc(110 * var(--px))}
@media (max-width:600px){.masque-titre{height:calc(57 * var(--px));line-height:calc(45 * var(--px))}}

/* tailles « éditoriales » (blocs plein écran, en rem) */
.ed-grand{font-size:1.875rem;line-height:1;font-weight:400}
@media (max-width:1599px){.ed-grand{font-size:1.625rem}}
@media (max-width:999px){.ed-grand{font-size:1.25rem}}
.ed-immense{font-size:4vw;line-height:1}
@media (max-width:999px){.ed-immense{font-size:1.875rem}}
.ed-capitales{font-size:.9375rem;line-height:1.2;text-transform:uppercase}
.ed-phrase{font-size:8vw;line-height:.95;font-weight:400}
.en-capitales{text-transform:uppercase}

/* rangées (grille en quarts des blocs plein écran) */
.bande{padding:0 1.25rem}
.rangee{display:grid;grid-template-columns:repeat(4,1fr);column-gap:2.5rem;align-items:start}
.rangee>*{min-width:0}
.q1{grid-column:span 1}.q2{grid-column:span 2}.q3{grid-column:span 3}.q4{grid-column:span 4}
@media (max-width:999px){.rangee.depuis-1000>*{grid-column:1/-1}.cache-avant-1000{display:none!important}}
@media (min-width:1000px){.cache-apres-1000{display:none!important}}
@media (max-width:699px){.rangee.depuis-700>*{grid-column:1/-1}}

/* 4. Habillage commun ---------------------------------------------------- */
.bloc-bordeaux{position:relative;z-index:1;background:var(--bordeaux);color:var(--rose)}

/* teinte des éléments fixes selon la section qui passe dessous */
.site{--teinte:var(--bordeaux)}
.site.sur-fonce{--teinte:var(--blanc)}
.site.sur-rose{--teinte:var(--rose)}

/* marque (sigle + nom) */
.marque-nom{position:absolute;top:calc(50 * var(--px));left:calc(50 * var(--px));width:calc(92 * var(--px));height:calc(22 * var(--px));overflow:hidden;color:var(--teinte);transition:color .5s;z-index:14}
.marque-nom svg{width:100%;transform-origin:0 0;overflow:visible}
.marque-sigle{position:fixed;top:calc(50 * var(--px));left:calc(50 * var(--px));width:calc(50 * var(--px));height:calc(50 * var(--px));color:var(--teinte);opacity:0;visibility:hidden;transition:color .5s;z-index:14}
@media (max-width:600px){
  .marque-nom{top:calc(30 * var(--px));left:calc(30 * var(--px));width:calc(100 * var(--px));height:calc(25 * var(--px))}
  .marque-sigle{top:calc(30 * var(--px));left:calc(30 * var(--px))}
}

/* bouton Menu */
.bouton-menu{position:fixed;top:0;right:0;z-index:14;display:flex;align-items:center;padding:calc(50 * var(--px));color:var(--teinte);transition:color .5s;font-family:var(--titre);font-size:calc(var(--tp)*var(--px));letter-spacing:calc(var(--ap)*var(--px));line-height:calc(20 * var(--px));visibility:hidden}
.bouton-menu-mots{position:relative}
.bouton-menu-mot{display:block;position:absolute;right:0;top:0;transform-origin:0 0;white-space:nowrap}
.bouton-menu-mot+.bouton-menu-mot{visibility:hidden}
.bouton-menu-picto{position:relative;display:flex;align-items:center;justify-content:center;width:calc(18 * var(--px));height:calc(18 * var(--px));margin-left:calc(12 * var(--px))}
.picto-traits{position:absolute;width:calc(18 * var(--px));height:calc(12 * var(--px))}
.picto-croix{position:absolute;width:calc(15 * var(--px));height:calc(15 * var(--px))}
.picto-traits line,.picto-croix line{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.picto-croix line{stroke-dashoffset:1;opacity:0}
@media (max-width:600px){
  .bouton-menu{padding:calc(30 * var(--px));line-height:calc(21 * var(--px));visibility:visible}
  .bouton-menu-picto{width:calc(18 * var(--px));height:calc(18 * var(--px));margin-left:calc(12 * var(--px))}
}

/* navigation */
.navigation{position:fixed;top:calc(45 * var(--px));right:calc(50 * var(--px));z-index:9;color:var(--teinte);transition:color .5s;user-select:none}
.navigation-liste{display:flex;gap:calc(30 * var(--px));overflow:hidden}
.navigation-item{transform-origin:0 0}
.navigation-lien{position:relative;font-family:var(--titre);font-size:calc(var(--tp)*var(--px));line-height:calc(var(--ip)*var(--px));letter-spacing:calc(var(--ap)*var(--px))}
.navigation-repere{position:absolute;left:0;bottom:calc(-15 * var(--px));width:calc(12 * var(--px));height:calc(12 * var(--px))}
.navigation-repere svg{width:100%;height:100%}
@media (max-width:600px){.navigation{display:none}}

/* soulignement au survol (liens texte) */
.souligne{position:relative}
.souligne::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--bascule)}
@media (hover:hover){.souligne:hover::after,.souligne:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}}

/* curseur « Voir » */
.curseur{position:fixed;left:0;top:0;z-index:150;width:calc(86 * var(--px));height:calc(86 * var(--px));margin:calc(-43 * var(--px)) 0 0 calc(-43 * var(--px));display:flex;align-items:center;justify-content:center;pointer-events:none}
.curseur-disque{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;scale:.1;transition:opacity .4s var(--bascule),scale .4s var(--bascule)}
.curseur-mot{position:relative;font:500 .8rem/1 var(--titre);color:var(--blanc);opacity:0;transition:opacity .4s}
.curseur.est-actif .curseur-disque{opacity:1;scale:1}
.curseur.est-actif .curseur-mot{opacity:1}
@media (hover:none){.curseur{display:none}}

/* panneau de menu plein écran */
.panneau{position:fixed;inset:0;z-index:10;background:var(--bordeaux);color:var(--rose)}
.panneau-cadre{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.panneau-grille{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte);margin:0 var(--marge)}
.panneau-images{position:absolute;top:50%;left:calc(285 * var(--px));width:calc(307 * var(--px));height:calc(434 * var(--px));translate:0 -50%;overflow:hidden}
.panneau-image{position:absolute;inset:0;overflow:hidden;visibility:hidden;backface-visibility:hidden}
.panneau-image:first-child{visibility:visible}
.panneau-liens{grid-column:8/11;position:relative;margin-bottom:calc(26 * var(--px))}
.panneau-item{overflow:hidden}
.panneau-lien{display:inline-flex;position:relative;transform-origin:0 0;font-family:var(--titre);font-size:calc(var(--t2)*var(--px));line-height:calc(var(--i2)*var(--px));letter-spacing:calc(var(--a2)*var(--px))}
.panneau-lien.souligne::after{bottom:1px;height:2px}
.panneau-repere{position:absolute;left:calc(-30 * var(--px));top:0;width:calc(12 * var(--px));height:calc(12 * var(--px));margin:calc(25 * var(--px)) 0;display:flex;align-items:center;visibility:hidden}
.panneau-repere svg{width:calc(12 * var(--px));height:calc(12 * var(--px))}
.panneau-contact{grid-column:8/13;display:flex;flex-direction:column}
.panneau-contact li{overflow:hidden}
.panneau-petit{display:inline-flex;position:relative;transform-origin:0 0;color:var(--rose-60);transition:color .5s;font-family:var(--titre);font-size:calc(var(--tt)*var(--px));line-height:calc(var(--it)*var(--px));letter-spacing:calc(var(--at)*var(--px))}
.panneau-petit.souligne::after{bottom:2px}
@media (hover:hover){.panneau-petit:hover{color:var(--rose)}}
.panneau-bas{position:fixed;left:calc(60 * var(--px));bottom:calc(60 * var(--px));width:calc(848 * var(--px));display:flex;align-items:flex-end}
.panneau-bas li:last-child{margin-left:auto}
.panneau .lien-rond{position:fixed;right:calc(60 * var(--px));bottom:calc(60 * var(--px))}
@media (max-width:600px){
  .panneau-cadre{padding-top:15vh}
  .panneau-grille{grid-template-columns:repeat(10,1fr);padding-bottom:calc(50 * var(--px))}
  .panneau-images,.panneau-contact{display:none}
  .panneau-liens{grid-column:2/11;margin-bottom:0}
  .panneau-item{grid-column:2/11}
  .panneau-lien{font-size:calc(var(--t1)*var(--px));letter-spacing:calc(var(--a1)*var(--px));line-height:calc(65 * var(--px))}
  .panneau-repere{left:calc(-32 * var(--px));height:calc(60 * var(--px));margin:0}
  .panneau .lien-rond{position:static;grid-column:2/11;margin:calc(26 * var(--px)) 0 calc(31 * var(--px))}
  .panneau-bas{position:static;grid-column:2/5;width:auto;display:block}
  .panneau-bas li{line-height:calc(30 * var(--px))}
}

/* étiquette : astérisque + mot */
.etiquette{position:relative;display:inline-flex;justify-self:flex-start;height:calc(34 * var(--px));padding-left:calc(22 * var(--px));color:var(--bordeaux);font-family:var(--texte);font-size:calc(var(--te)*var(--px));line-height:calc(37 * var(--px));letter-spacing:calc(var(--ae)*var(--px))}
.fonce .etiquette,.etiquette.sur-fonce{color:var(--blanc)}
.etiquette-signe{position:absolute;left:0;top:0;width:calc(12 * var(--px));height:calc(12 * var(--px));transform:translate(calc(.5 * var(--px)),calc(11 * var(--px)))}
.etiquette-mot{position:relative;display:flex;transform-origin:0 0}
@media (max-width:600px){
  .etiquette{height:calc(29 * var(--px));line-height:calc(31 * var(--px));padding-left:calc(22 * var(--px))}
  .etiquette-signe{transform:translate(calc(2 * var(--px)),calc(8 * var(--px)))}
}

/* lien à cercle */
.lien-rond{position:relative;display:inline-flex;justify-self:flex-start;font-family:var(--titre);font-size:calc(var(--ta)*var(--px));line-height:calc(var(--ia)*var(--px));letter-spacing:calc(var(--aa)*var(--px))}
.lien-rond-cercle{position:absolute;left:calc(-32 * var(--px));top:calc(-10 * var(--px));width:calc(39 * var(--px));height:calc(39 * var(--px));border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lien-rond-point{position:absolute;width:calc(6 * var(--px));height:calc(6 * var(--px));overflow:visible;fill:none}
.lien-rond-point circle{fill:none;stroke:currentColor;stroke-width:1}
.lien-rond-fond{position:absolute;inset:0;border-radius:50%;background:currentColor;translate:0 101%;z-index:1;transition:translate .5s var(--bascule)}
.lien-rond-picto{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:var(--bordeaux);overflow:hidden}
.lien-rond-picto svg{width:calc(11 * var(--px));height:calc(10 * var(--px));opacity:0;translate:-90% 60%;transition:translate .5s var(--bascule),opacity .5s var(--bascule)}
.lien-rond-texte{position:relative;padding-bottom:calc(2 * var(--px))}
.lien-rond-trait{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:0 50%;transition:transform .5s var(--bascule)}
.lien-rond--fonce{color:var(--bordeaux)}
.lien-rond--fonce .lien-rond-trait{background:var(--bordeaux-40)}
.lien-rond--fonce .lien-rond-point circle{stroke:var(--bordeaux)}
.lien-rond--fonce .lien-rond-fond{background:var(--bordeaux)}
.lien-rond--fonce .lien-rond-picto{color:var(--blanc)}
@media (hover:hover){
  .lien-rond:hover .lien-rond-fond,.lien-rond:focus-visible .lien-rond-fond{translate:0 0}
  .lien-rond:hover .lien-rond-picto svg,.lien-rond:focus-visible .lien-rond-picto svg{translate:0 0;opacity:1}
  .lien-rond:hover .lien-rond-trait,.lien-rond:focus-visible .lien-rond-trait{transform:scaleX(0)}
}
@media (max-width:600px){
  .lien-rond-cercle{left:0;top:0;width:0;height:0;overflow:visible}
  .lien-rond-texte{padding-bottom:calc(.5 * var(--px))}
  .lien-rond-point{position:absolute;left:calc(-14 * var(--px));top:calc(3 * var(--px));width:calc(7 * var(--px));height:calc(7 * var(--px))}
  .lien-rond-fond,.lien-rond-picto{display:none}
}

/* pied de page (bloc nuit) */
.pied{background:var(--nuit);color:var(--rose);overflow:hidden;padding:calc(200 * var(--px)) 0 calc(80 * var(--px))}
.pied-grille{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte);margin:0 var(--marge)}
.pied-titre{grid-column:1/6;margin-bottom:calc(26 * var(--px));text-indent:calc(-5 * var(--px))}
.pied-texte{grid-column:1/6;color:var(--rose-80)}
.pied-filet{grid-column:1/13;height:1px;background:var(--rose-60);margin:calc(60 * var(--px)) 0}
.pied-adresse{grid-column:1/4}
.pied-nav{grid-column:4/6}
.pied-reseaux{grid-column:6/9}
.pied-ligne{color:var(--rose-80);font-family:var(--titre);font-size:calc(var(--tt)*var(--px));letter-spacing:calc(var(--at)*var(--px));line-height:calc(30 * var(--px))}
.pied .lien-rond{grid-column:12/13;margin-top:auto;align-self:end}
.pied-fond{position:absolute;z-index:1;top:calc(-150 * var(--px));right:calc(-50 * var(--px));width:calc(1000 * var(--px));height:calc(1000 * var(--px))}
.pied-fond::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--nuit) 0%,transparent) 0,color-mix(in srgb,var(--nuit) 0%,transparent) 36%,var(--nuit) 74%,var(--nuit) 100%)}
.pied-fond img{opacity:.35}
@media (max-width:600px){
  .pied{padding:calc(80 * var(--px)) 0}
  .pied-grille{grid-template-columns:repeat(10,1fr)}
  .pied-titre{grid-column:1/10;margin-bottom:calc(25 * var(--px));order:1;text-indent:0}
  .pied-texte{grid-column:1/11;order:2}
  .pied .lien-rond{grid-column:1/11;margin:calc(30 * var(--px)) 0 0;order:3}
  .pied-filet{grid-column:1/11;margin:calc(30 * var(--px)) 0;order:4}
  .pied-adresse{display:none}
  .pied-nav{grid-column:1/5;order:5}
  .pied-reseaux{grid-column:6/11;order:6}
  .pied-fond{top:calc(-20 * var(--px));right:calc(-40 * var(--px));width:calc(300 * var(--px));height:calc(300 * var(--px))}
}

/* traits verticaux des blocs plein écran */
.reperes{position:absolute;inset:0;font-size:0;pointer-events:none;z-index:2;display:grid;grid-template-columns:repeat(4,1fr)}
.reperes span{height:100%}
@media (min-width:1000px){.reperes span{border-right:1px solid}.reperes--duo span:nth-child(odd){border-right-color:transparent}}
@media (max-width:999px){.reperes{grid-template-columns:repeat(2,1fr)}.reperes span:first-child{border-right:1px solid}.reperes span:nth-child(n+3){display:none}}

/* 5. Accueil ------------------------------------------------------------- */
/* écran « Enchantée, » : cinq tranches qui glissent verticalement */
.bonjour{position:fixed;inset:0;z-index:200;pointer-events:none;color:#111;transition:color 1.2s var(--doux)}
.bonjour::before{content:"";position:fixed;left:0;right:0;top:0;height:100vh;background:var(--rose);transition:background-color 1.2s var(--doux),opacity 1.2s var(--souple)}
.bonjour-mots{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:0}
.bonjour-tranche{position:absolute;top:0;bottom:0;width:20%;overflow:hidden;white-space:nowrap}
.bonjour-tranche:first-child{position:relative;display:inline-block}
.bonjour-tranche-mot{display:block;transition:transform 1s var(--doux)}
.bonjour-tranche:nth-child(1){left:0}.bonjour-tranche:nth-child(1) .bonjour-tranche-mot{margin-left:0}
.bonjour-tranche:nth-child(2){left:20%}.bonjour-tranche:nth-child(2) .bonjour-tranche-mot{margin-left:-100%}
.bonjour-tranche:nth-child(3){left:40%}.bonjour-tranche:nth-child(3) .bonjour-tranche-mot{margin-left:-200%}
.bonjour-tranche:nth-child(4){left:60%}.bonjour-tranche:nth-child(4) .bonjour-tranche-mot{margin-left:-300%}
.bonjour-tranche:nth-child(5){left:80%}.bonjour-tranche:nth-child(5) .bonjour-tranche-mot{margin-left:-400%}
html:not(.bonjour-entre) .bonjour-tranche:nth-child(odd) .bonjour-tranche-mot{transform:translateY(110%)}
html:not(.bonjour-entre) .bonjour-tranche:nth-child(even) .bonjour-tranche-mot{transform:translateY(-110%)}
html.bonjour-entre .bonjour-tranche-mot{transform:none}
html.bonjour-sort .bonjour{color:var(--rose)}
html.bonjour-sort .bonjour::before{background-color:var(--bordeaux);opacity:0;transition-delay:0s,.6s}
html.bonjour-sort .bonjour-tranche-mot{transition-delay:.2s;transition-timing-function:var(--souple)}
html.bonjour-sort .bonjour-tranche:nth-child(odd) .bonjour-tranche-mot{transform:translateY(-110%)}
html.bonjour-sort .bonjour-tranche:nth-child(even) .bonjour-tranche-mot{transform:translateY(110%)}
html.est-pret .bonjour{pointer-events:none}

/* ouverture : quatre grandes lignes sur un fond en bandes */
.bloc-ouverture{padding-top:calc(80 * var(--px))}
@media (max-width:600px){.bloc-ouverture{padding-top:calc(80 * var(--px))}}
.ouverture{position:relative;z-index:1;overflow:hidden;line-height:1;background:var(--bordeaux)}
.ouverture-fond{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ouverture-voile{position:absolute;inset:0;z-index:1;background:var(--bordeaux);opacity:0;pointer-events:none}
.ouverture-diapos{position:absolute;inset:0;z-index:-1}
.ouverture-diapo{position:absolute;inset:0;z-index:0}
.ouverture-diapo.est-sortante{z-index:2}
.ouverture-diapo.est-active{z-index:3}
.ouverture-bande{position:relative;height:25vh;overflow:hidden}
.ouverture-bande img{width:100vw;height:125vh;object-fit:cover;object-position:center top;transform:scale(1.5);transform-origin:center top;transition:transform 1s var(--souple)}
.ouverture-bande::before{content:"";position:absolute;inset:0;z-index:50;background:var(--bordeaux);opacity:.2}
.ouverture-bande::after{content:"";position:absolute;inset:0;z-index:100;background:var(--bordeaux);transform-origin:center top;transition:transform .6s var(--souple)}
.ouverture-bande:nth-child(2) img{object-position:center -25vh}
.ouverture-bande:nth-child(3) img{object-position:center -50vh}
.ouverture-bande:nth-child(4) img{object-position:center -75vh}
.ouverture-bande:nth-child(5) img{object-position:center -100vh}
.ouverture-bande:nth-child(1) img,.ouverture-bande:nth-child(1)::after{transition-delay:0s}
.ouverture-bande:nth-child(2) img,.ouverture-bande:nth-child(2)::after{transition-delay:.2s}
.ouverture-bande:nth-child(3) img,.ouverture-bande:nth-child(3)::after{transition-delay:.1s}
.ouverture-bande:nth-child(4) img,.ouverture-bande:nth-child(4)::after{transition-delay:.3s}
.ouverture-bande:nth-child(5) img,.ouverture-bande:nth-child(5)::after{transition-delay:.2s}
.est-active .ouverture-bande::after{transform:scaleY(0)}
.est-active .ouverture-bande img{transform:none}
.est-sortante .ouverture-bande::after{transform-origin:center bottom}
@media (min-width:1920px){.ouverture-bande img{transform:none!important}}
@media (orientation:portrait){.ouverture-bande img{display:none}}

.ouverture-lignes{font-size:0}
.ouverture-rang{position:relative;z-index:1;height:25vh;overflow:hidden;padding:0 1.25rem;font-size:25vh;text-align:left;border-bottom:1px solid transparent;transition:border-color 0s linear}
.ouverture-rang--droite{text-align:right}
.ouverture-rang--libre{overflow:visible}
.ouverture-rang::after{content:"";position:absolute;inset:0;z-index:-1;border-bottom:1px solid;transform:scaleX(0);transition:opacity 1.2s linear,transform 1.2s var(--souple)}
.ouverture-rang:nth-child(odd)::after{transform-origin:left center}
.ouverture-rang:nth-child(even)::after{transform-origin:right center}
.ouverture-rang:last-child::after{display:none}
html.est-pret .ouverture-rang{border-color:var(--rose);transition-delay:1.4s}
html.est-pret .ouverture-rang::after{transform:scaleX(1);opacity:0;transition-delay:1.4s,.2s}
.ouverture-mot{will-change:transform}
.ouverture-mot .lettre{display:inline-block;min-width:.1em}
.ouverture-note{position:absolute;top:1.25rem;opacity:0;transform:translateY(100%);transition:opacity .6s var(--doux),transform .6s var(--doux)}
.ouverture-note span{display:block}
.ouverture-rang:nth-child(1) .ouverture-note{left:75%}
.ouverture-rang:nth-child(2) .ouverture-note{left:12.5%}
.ouverture-rang:nth-child(3) .ouverture-note{left:50%}
.ouverture-rang:nth-child(4) .ouverture-note{left:1.25rem}
html.est-pret .ouverture-note{opacity:1;transform:none}
html.est-pret .ouverture-rang:nth-child(1) .ouverture-note{transition-delay:1.2s}
html.est-pret .ouverture-rang:nth-child(2) .ouverture-note{transition-delay:1.4s}
html.est-pret .ouverture-rang:nth-child(3) .ouverture-note{transition-delay:1.6s}
html.est-pret .ouverture-rang:nth-child(4) .ouverture-note{transition-delay:1.8s}
@media (orientation:portrait){
  .ouverture-lignes{direction:rtl;text-align:center;margin:0 1.25rem}
  .ouverture-rang{display:inline-block;width:25%;height:95vh;padding:1.25rem 0;vertical-align:top;writing-mode:vertical-rl;text-orientation:mixed;font-size:25vw;direction:ltr;border-bottom:0;border-right:1px solid transparent}
  .ouverture-rang::after{border-bottom:0;border-right:1px solid;transform:scaleY(0)}
  .ouverture-rang:nth-child(odd)::after{transform-origin:center top}
  .ouverture-rang:nth-child(even)::after{transform-origin:center bottom}
  html.est-pret .ouverture-rang{border-color:currentColor}
  html.est-pret .ouverture-rang::after{transform:scaleY(1)}
  .ouverture-rang:nth-child(4){border-left:1px solid transparent}
  .ouverture-rang:nth-child(4)::after{border-left:1px solid var(--rose)}
  .ouverture-rang:last-child{display:none}
  .ouverture-note{display:none}
}

/* projets choisis : quatre images en quinconce */
.selection{color:var(--bordeaux);padding:calc(206 * var(--px)) 0}
.selection-cadre{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:0 var(--marge)}
.selection-texte{display:flex;flex-direction:column;align-items:flex-start}
.selection-titre{order:1;margin:0 0 calc(100 * var(--px)) calc(89 * var(--px))}
.selection-texte .etiquette{order:2;margin:0 0 calc(40 * var(--px)) calc(821 * var(--px))}
.selection-corps{order:3;margin-left:calc(820 * var(--px));width:calc(370 * var(--px))}
.selection-projets{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte);margin-top:calc(-200 * var(--px));width:100%}
.selection-projet{display:flex;flex-direction:column}
.selection-projet:nth-child(1){grid-column:2/8}
.selection-projet:nth-child(1) .selection-vue{height:calc(729 * var(--px))}
.selection-projet:nth-child(2){grid-column:9/13;margin-top:calc(390 * var(--px))}
.selection-projet:nth-child(2) .selection-vue{height:calc(473 * var(--px))}
.selection-projet:nth-child(3){grid-column:6/11;margin-top:calc(167 * var(--px))}
.selection-projet:nth-child(3) .selection-vue{height:calc(600 * var(--px))}
.selection-projet:nth-child(4){grid-column:2/5;margin-top:calc(-145 * var(--px))}
.selection-projet:nth-child(4) .selection-vue{height:calc(344 * var(--px))}
.selection-projet:nth-child(4) .selection-legende{width:calc(350 * var(--px))}
.selection-vue{position:relative;overflow:hidden}
.selection-vue img{position:absolute;inset:0;width:100%;height:100%;z-index:2;transition:inset .3s var(--doux)}
@media (hover:hover){.selection-vue:hover img{inset:1px;width:calc(100% - 2px);height:calc(100% - 2px)}}
.selection-legende{margin-top:calc(13 * var(--px));overflow:hidden;white-space:nowrap;color:var(--bordeaux-60);font-family:var(--titre);font-size:calc(var(--tp)*var(--px));line-height:calc(var(--ip)*var(--px));letter-spacing:calc(var(--ap)*var(--px))}
.selection-legende strong{color:var(--bordeaux);font-weight:400}
.selection-legende strong::after{content:" —"}
.selection-legende-ligne{display:block;transform-origin:0 0;visibility:hidden}
.selection .lien-rond{position:absolute;bottom:0;left:calc(890 * var(--px))}
@media (hover:none){.selection-legende-ligne{visibility:visible}}
@media (max-width:600px){
  .selection{padding:calc(80 * var(--px)) 0}
  .selection-titre{order:0;margin:calc(20 * var(--px)) 0 calc(25 * var(--px));font-size:calc(var(--t1)*var(--px));line-height:calc(var(--i1)*var(--px));letter-spacing:calc(var(--a1)*var(--px))}
  .selection-texte .etiquette{order:-1;margin:0}
  .selection-corps{order:1;margin:0;width:auto}
  .selection-projets{display:block;margin:calc(33 * var(--px)) 0}
  .selection-projet{margin-bottom:calc(33 * var(--px))!important;margin-top:0!important}
  .selection-vue{height:calc(390 * var(--px))!important;width:calc(313 * var(--px))}
  .selection-legende{margin-top:calc(13 * var(--px));white-space:normal}
  .selection-legende strong{display:block}
  .selection-legende strong::after{content:none}
  .selection-legende-ligne{visibility:visible}
  .selection .lien-rond{position:relative;left:auto;margin:0 auto}
}

/* présentation (phrase en colonnes, savoir-faire, formes) */
.presentation{position:relative;border-top:1px solid}
.manifeste{position:relative;font-size:0}
.manifeste-colonne{display:inline-block;width:25%;vertical-align:top;overflow:hidden;padding-left:1.25rem}
.manifeste-colonne:not(:nth-child(4)){border-right:1px solid}
.manifeste--plein .manifeste-colonne{padding-left:0}
.manifeste-modele{position:absolute;inset:0 0 0 1.25rem;color:transparent}
.manifeste-texte{width:87.5vw;padding:3.75rem 0}
.manifeste--plein .manifeste-texte{width:100vw}
.manifeste--haut .manifeste-texte{padding-top:13.125rem}
.manifeste--bas .manifeste-texte{padding-bottom:13.125rem}
.manifeste--sans-haut .manifeste-texte{padding-top:0!important}
.manifeste-colonne:nth-child(2) .manifeste-texte{margin-left:-25vw}
.manifeste-colonne:nth-child(3) .manifeste-texte{margin-left:-50vw}
.manifeste-colonne:nth-child(4) .manifeste-texte{margin-left:-75vw}
/* décalage de départ de chaque ligne : --c = colonne, --l = ligne (posés par le script) */
.manifeste-texte .rang-texte{display:block;will-change:transform;transform:translateX(var(--depart,0));transition:transform .6s var(--souple);transition-delay:calc(var(--l,0) * .1s + .1s)}
.manifeste.est-visible .rang-texte{transform:none;transition-duration:1s}
@media (max-width:999px){
  .manifeste-colonne{width:50%}
  .manifeste-colonne:nth-child(2){border-right:0}
  .manifeste-colonne:nth-child(3),.manifeste-colonne:nth-child(4){visibility:hidden;height:0;overflow:hidden}
  .manifeste-colonne:nth-child(2) .manifeste-texte{margin-left:-50vw}
  .manifeste-texte{padding:2.5rem 0}
  .manifeste--haut .manifeste-texte{padding-top:5rem}
  .manifeste--bas .manifeste-texte{padding-bottom:2.5rem}
}

.savoirs{border-top:1px solid;border-bottom:1px solid;overflow:hidden}
@media (min-width:700px){.savoirs{padding:1.25rem 0}}
.savoirs-roue{position:relative}
.savoirs-mot{transform:translateY(calc(150% + 1.25rem));transition:transform 0s var(--doux)}
.savoirs-mot:not(:first-child){position:absolute;top:0;left:0}
.savoirs-mot.est-actif{transform:none;transition:transform .6s cubic-bezier(.45,.03,.52,.96) .2s}
.savoirs-mot.est-sortant{transform:translateY(calc(-150% - 1.25rem));transition:transform .6s cubic-bezier(.45,.03,.52,.96)}
@media (max-width:699px){
  .savoirs .rangee{margin-right:-1.25rem}
  .savoirs-col{padding:1.25rem 0;overflow:hidden}
  .savoirs-col:first-child{border-bottom:1px solid}
}

.formes{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid}
.forme{position:relative;aspect-ratio:1}
@media (min-width:1000px){.forme:not(:last-child){border-right:1px solid}}
@media (max-width:999px){.formes{grid-template-columns:repeat(2,1fr)}.forme:nth-child(-n+2){border-bottom:1px solid}.forme:nth-child(odd){border-right:1px solid}}
.forme-dessin{position:absolute;top:33%;right:1.25rem;bottom:1.25rem;left:1.25rem}
.forme-dessin>i{position:absolute;display:block;background:var(--rose)}
.forme--carre>i{left:0;right:0;bottom:0;height:50%}
.forme--carre>i:first-child{transform-origin:left bottom}
.forme--carre>i:nth-child(2){height:100%;transform-origin:left top;transform:scaleY(0)}
.forme--carre.est-active>i:first-child{animation:forme-ecrase 1.6s var(--souple)}
.forme--carre.est-active>i:nth-child(2){animation:forme-dresse 1.4s cubic-bezier(.45,.03,.52,.96) .4s}
.forme--duo>i{width:50%;height:50%;top:0;transition:transform 1.2s cubic-bezier(.45,.03,.52,.96)}
.forme--duo>i:first-child{left:0}
.forme--duo>i:nth-child(2){right:0;transform:translateY(100%)}
.forme--duo.est-active>i:first-child{animation:forme-tour 1.6s var(--souple) forwards}
.forme--duo.est-active>i:nth-child(2){animation:forme-tour-inverse 1.6s cubic-bezier(.77,0,.18,1) forwards}
.forme--ronds>i{bottom:0;width:50%;aspect-ratio:1;border-radius:50%}
.forme--ronds>i:first-child{left:0}
.forme--ronds>i:nth-child(2){right:0}
.forme--ronds.est-active>i{animation:forme-rebond 1.5s var(--souple) forwards}
.forme--ronds.est-active>i:nth-child(1){animation-delay:.2s}
.forme--ronds.est-active>i:nth-child(2){animation-delay:.4s}
.forme--barre>i{top:0;left:50%;width:100%;height:50%;transform:translateX(-50%)}
.forme--barre.est-active>i{animation:forme-pivot 2s cubic-bezier(.45,.03,.52,.96) forwards}
@keyframes forme-ecrase{0%,100%{transform:none}33%,66%{transform:scaleY(0)}}
@keyframes forme-dresse{0%{transform:scaleY(0)}45%,50%{transform-origin:center top;transform:none}60%{transform-origin:center bottom}80%,100%{transform-origin:center bottom;transform:scaleY(.5)}}
@keyframes forme-tour{0%{transform:none}50%{transform:translateX(100%)}100%{transform:translate(100%,100%)}}
@keyframes forme-tour-inverse{0%{transform:translateY(100%)}50%{transform:translate(-100%,100%)}100%{transform:translateX(-100%)}}
@keyframes forme-rebond{0%,100%{transform:none}50%{transform:translateY(-100%)}}
@keyframes forme-pivot{0%{transform:translateX(-50%) rotate(0) scaleX(1)}33%{transform:translateX(-50%) rotate(0) scaleX(.5)}70%{transform:translateX(-50%) rotate(360deg) scaleX(.1)}100%{transform:translateX(-50%) rotate(360deg) scaleX(1)}}

/* 6. Galerie ------------------------------------------------------------- */
.galerie{background:var(--nuit);border-bottom:1px solid var(--nuit)}
.galerie-tete{position:relative;z-index:1;overflow:hidden;background:var(--bordeaux)}
.galerie-volets{position:absolute;inset:0 0 -2px;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.galerie-volets span{display:block;height:100%;background:var(--nuit);transform-origin:center bottom;transform:scaleY(.5)}
@media (max-width:999px){.galerie-volets{grid-template-columns:repeat(2,1fr)}.galerie-volets span:nth-child(n+3){display:none}}
.galerie-titre{font-size:22vw;line-height:1;font-weight:400;white-space:nowrap}
@media (max-width:999px){.galerie-titre{font-size:35vw}}
.defilant{position:relative;z-index:3;overflow:hidden;width:100vw;white-space:nowrap}
.defilant-piste{display:inline-flex;will-change:transform}
.defilant-piste>*{flex:none;padding-right:3.125rem}
.galerie-intro{padding:0 1.25rem 3rem;max-width:46rem}
.galerie-legende{position:relative;padding:0 1.25rem 1.25rem}
@media (max-width:999px){.galerie-legende{display:none}}

.liste-item{border-top:1px solid var(--rose)}
.liste-bouton{position:relative;z-index:1;display:block;width:100%;padding:1.25rem;text-align:left;line-height:normal;user-select:none;transition:color .3s var(--doux)}
/* en-tête de ligne : quatre quarts de la largeur utile, sans gouttière (texte en retrait de 2,5 rem à droite) */
.liste-bouton .rangee{grid-template-columns:repeat(4,25%);column-gap:0}
.liste-bouton .rangee>*{padding-right:2.5rem}
.liste-bouton::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rose);transform:scaleY(0);transition:transform .3s var(--doux)}
.liste-bouton.par-haut::before{transform-origin:center top}
.liste-bouton.par-bas::before{transform-origin:center bottom}
.souris .liste-item:not(.est-ouvert) .liste-bouton.est-survole{color:var(--bordeaux)}
.souris .liste-item:not(.est-ouvert) .liste-bouton.est-survole::before{transform:none}
.liste-fleche{position:absolute;top:50%;right:1.25rem;opacity:0;transform:translate(-100%,-100%);transition:opacity .3s var(--doux),transform .3s var(--doux)}
.liste-fleche svg{width:20px;height:20px}
@media (max-width:699px){.liste-fleche svg{width:15px;height:15px}}
.souris .liste-item:not(.est-ouvert) .liste-bouton:hover .liste-fleche{opacity:1;transform:translate(-100%,-50%)}
.souris .liste-item.est-ouvert .liste-fleche{opacity:1;transform:translate(-100%,-50%) rotate(180deg)}
.souris .liste-item.est-ouvert .liste-bouton:hover .liste-fleche{transform:translate(-100%,-100%) rotate(180deg)}
.tactile .liste-fleche{opacity:1;transform:translate(-100%,-50%)}
.tactile .liste-item.est-ouvert .liste-fleche{transform:translate(-100%,-50%) rotate(180deg)}
.liste-contenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.25,.46,.45,.94)}
.liste-item.est-ouvert .liste-contenu{grid-template-rows:1fr}
.liste-contenu>div{overflow:hidden;min-height:0}
.liste-detail{position:relative;padding:0 1.25rem 1.25rem}
.liste-detail .rangee{grid-template-columns:repeat(4,1fr)}
.liste-diapos{grid-column:1/3}
.liste-texte{grid-column:3/4}
.liste-action{grid-column:4/5}
.liste-description{line-height:1.2}
.liste-statut{margin-top:1rem;opacity:.85}
.liste-action .lien-rond{color:var(--rose);margin-bottom:1.5rem}
.liste-mobile .rangee{grid-template-columns:1fr 1fr;column-gap:0}
@media (max-width:999px){
  .liste-detail .rangee{grid-template-columns:1fr}
  .liste-detail .rangee>*{grid-column:1/-1}
  .liste-mobile{order:1}
  .liste-action{order:2}
  .liste-texte{order:3}
  .liste-diapos{order:4}
  .liste-description{margin-top:-10px}
  .liste-mobile .liste-description{padding:.9375rem 0}
}

/* diaporama en fondu */
.diaporama{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .5s var(--doux)}
.liste-item.est-ouvert .diaporama,.diaporama.est-visible{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition-delay:.2s;transition-duration:.6s}
.diaporama-vues{display:grid}
.diaporama-vue{grid-area:1/1;opacity:0;transition:opacity .6s ease;pointer-events:none}
.diaporama-vue.est-active{opacity:1;pointer-events:auto}
.diaporama-vue img{aspect-ratio:3/2}
.diaporama-points{position:absolute;right:0;bottom:.625rem;left:0;z-index:2;display:flex;justify-content:flex-end;gap:.625rem;padding-right:1.25rem}
.diaporama-point{width:10px;height:10px;border-radius:50%;border:1px solid var(--rose);background:transparent;transition:background-color .3s var(--doux)}
.diaporama-point[aria-current="true"]{background:var(--rose)}
.recherches .diaporama-point{border-color:var(--bordeaux)}
.recherches .diaporama-point[aria-current="true"]{background:var(--bordeaux)}

/* 7. Études de cas ------------------------------------------------------- */
.grille-page{display:grid;grid-template-columns:repeat(var(--colonnes),1fr);column-gap:var(--goutte);margin:0 var(--marge)}
.avec-haut{padding-top:calc(150 * var(--px))}
.avec-haut-bas{padding:calc(150 * var(--px)) 0}
@media (max-width:600px){.avec-haut{padding-top:calc(80 * var(--px))}.avec-haut-bas{padding:calc(80 * var(--px)) 0}}
.fond-bordeaux{background:var(--bordeaux)}
.fond-blanc{background:var(--blanc)}

/* couverture (étude de cas et À propos) */
.couverture{position:relative;pointer-events:none;background:var(--bordeaux);color:var(--blanc);overflow:hidden}
.couverture--etude{height:calc(1793 * var(--px))}
.couverture--portrait{height:175vh;color:var(--blanc)}
.couverture-cadre{position:relative;z-index:1;margin:0 var(--marge)}
.couverture-haut{display:flex;flex-direction:column;align-items:flex-start;height:100vh;max-height:calc(936 * var(--px));padding-bottom:calc(60 * var(--px))}
.couverture-titre{margin:auto 0 0}
.couverture-sous-titre{opacity:.8}
.couverture-sous-titre .statut{white-space:nowrap}
.couverture-fleche{display:none}
.couverture-bas{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte)}
.couverture-intro{grid-column:1/7;margin:calc(135 * var(--px)) 0 calc(151 * var(--px))}
.couverture-bas .lien-rond{grid-column:11/13;align-self:flex-start;margin:calc(-80 * var(--px)) 0 0 auto;pointer-events:all;visibility:hidden}
.fiche{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte);color:var(--blanc-80);line-height:calc(32 * var(--px))}
.fiche>*{display:flex;flex-direction:column;grid-column:span 2}
.fiche>*::before{content:attr(data-intitule);color:var(--blanc);font-family:var(--titre)}
.couverture-fond{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:all}
.couverture-fond img{object-position:center top;will-change:transform}
.couverture--etude .couverture-fond::after,.couverture--portrait .couverture-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--nuit) 15%,transparent) 0%,color-mix(in srgb,var(--nuit) 55%,transparent) 100%);pointer-events:none}
/* variante portrait (À propos) */
.couverture--portrait .couverture-cadre{padding-top:calc(298 * var(--px))}
.couverture--portrait .couverture-haut{height:auto;max-height:none;padding:0}
.couverture--portrait .couverture-titre{display:inline-flex;flex-direction:column;margin:0 0 calc(10 * var(--px));transform:translateX(calc(-10 * var(--px)))}
.couverture--portrait .couverture-sous-titre{opacity:1;color:var(--blanc-80)}
.couverture--portrait .couverture-bas{display:flex;flex-direction:column;align-items:flex-start;margin:calc(267 * var(--px)) calc(70 * var(--px)) 0 calc(616 * var(--px))}
.couverture--portrait .couverture-bas .lien-rond{margin:0;visibility:visible}
.couverture-texte p{color:var(--blanc-80);margin:calc(25 * var(--px)) 0;width:calc(423 * var(--px))}
.indication{position:absolute;right:calc(50 * var(--px));top:100vh;z-index:2;transform:translateY(calc(-75 * var(--px)));color:var(--blanc-60)}
@media (max-width:600px){
  .couverture--etude,.couverture--portrait{height:175vh}
  .couverture-cadre{position:absolute}
  .couverture-haut{height:100vh;max-height:none;padding:0}
  .couverture-titre{margin:auto 0 calc(19 * var(--px))}
  .couverture-sous-titre{font-size:calc(var(--t4)*var(--px));line-height:calc(var(--i4)*var(--px));letter-spacing:0;margin-bottom:calc(26 * var(--px))}
  .couverture-fleche{display:block;width:calc(12 * var(--px));margin-bottom:calc(40 * var(--px));transform:rotate(90deg)}
  .couverture-bas{grid-template-columns:repeat(10,1fr);height:75vh}
  .couverture-intro{grid-column:1/11;margin:auto 0 calc(41 * var(--px))}
  .couverture-bas .lien-rond{grid-column:1/6;margin:0}
  .fiche{grid-column:6/11;display:block;line-height:calc(30 * var(--px));margin-bottom:calc(80 * var(--px))}
  .fiche>[data-intitule="Client"],.fiche>[data-intitule="Domaines"],.fiche>[data-intitule="Date"]{display:none}
  .couverture-fond{top:auto;height:100vh}
  .couverture--portrait .couverture-cadre{padding-top:0}
  .couverture--portrait .couverture-haut{height:100vh}
  .couverture--portrait .couverture-titre{margin:auto 0 0;transform:none}
  .couverture--portrait .couverture-sous-titre{color:var(--blanc)}
  .couverture--portrait .couverture-sous-titre{width:calc(219 * var(--px));margin:calc(25 * var(--px)) 0}
  .couverture--portrait .couverture-bas{margin:0;height:75vh}
  .couverture--portrait .couverture-bas .lien-rond{margin-bottom:calc(80 * var(--px))}
  .couverture-texte p{width:auto;margin:calc(16 * var(--px)) 0 calc(38 * var(--px))}
  .indication{display:none}
}

/* texte de projet */
.texte-projet .grille-page>*{min-width:0}
.texte-projet-titre{grid-column:4/13}
.texte-projet-titre.ty-1{margin:0 0 calc(57 * var(--px))}
.texte-projet-titre.ty-2{margin:0 0 calc(24 * var(--px))}
.texte-projet .etiquette{grid-column:2/4}
.texte-projet-corps{grid-column:4/8;color:var(--bordeaux-60)}
.texte-projet--droite .texte-projet-titre{grid-column:7/13}
.texte-projet--droite .etiquette{grid-column:5/7}
.texte-projet--droite .texte-projet-corps{grid-column:7/13}
.fonce .texte-projet-titre{color:var(--blanc)}
.fonce .texte-projet-corps{color:var(--blanc-80)}
@media (max-width:600px){
  .texte-projet .grille-page{display:flex;flex-direction:column;align-items:flex-start}
  .texte-projet .etiquette{order:1;margin-bottom:calc(23 * var(--px))}
  .texte-projet-titre{order:2}
  .texte-projet-titre.ty-1{margin:0 0 calc(35 * var(--px))}
  .texte-projet-titre.ty-2{margin:0 0 calc(24 * var(--px))}
  .texte-projet-corps{order:3}
}

/* deux colonnes d'images avec un bloc de texte */
.duo{overflow:hidden}
.duo-texte{grid-column:1/10}
.duo-texte .texte-projet-corps{margin:calc(23 * var(--px)) 0 calc(53 * var(--px));color:var(--bordeaux-60)}
.fonce .duo-texte .texte-projet-corps{color:var(--blanc-80)}
.duo-gauche{grid-column:1/6;margin-left:calc(-584 * var(--px))}
.duo-droite{grid-column:7/13;margin-right:calc(-276 * var(--px))}
.duo-media{margin-bottom:calc(150 * var(--px))}
.duo-media:last-child{margin-bottom:0}
.duo-droite .duo-media:first-child{margin-top:calc(500 * var(--px))}
@media (min-width:601px){
  .duo .grille-page{position:relative}
  .duo-texte{position:absolute;left:calc(616 * var(--px));width:calc(380 * var(--px))}
  .duo-texte .texte-projet-corps{margin:calc(43 * var(--px)) 0 0}
}
@media (max-width:600px){
  .duo-gauche{margin-left:calc(-124 * var(--px))}
  .duo-droite{grid-column:7/11;margin-right:calc(-155 * var(--px))}
  .duo-media{margin-bottom:calc(40 * var(--px))}
  .duo-droite .duo-media:first-child{margin-top:calc(90 * var(--px))}
}

/* frise : deux rangées de quatre images qui glissent en sens contraire */
.frise{overflow:hidden}
.frise-rangs{display:block}
.frise-rang{display:inline-flex;align-items:flex-end;will-change:transform}
.frise-rang:first-child{margin-bottom:calc(30 * var(--px))}
.frise-rang:nth-child(2){align-items:flex-start}
.frise-media{flex:none;margin-right:calc(31 * var(--px))}
.frise-media:last-child{margin-right:0}
.frise-media img{aspect-ratio:1774/1000}
.frise-rang .frise-media:nth-child(1),.frise-rang .frise-media:nth-child(4){width:calc(278 * var(--px))}
.frise-rang .frise-media:nth-child(2){width:calc(584 * var(--px))}
.frise-rang .frise-media:nth-child(3){width:calc(380 * var(--px))}
.frise-rang:nth-child(2) .frise-media:nth-child(2){width:calc(380 * var(--px))}
.frise-rang:nth-child(2) .frise-media:nth-child(3){width:calc(584 * var(--px))}
@media (max-width:600px){
  .frise-rang:first-child{margin-bottom:calc(15 * var(--px))}
  .frise-media{margin-right:calc(15 * var(--px))}
  .frise-rang .frise-media:nth-child(1),.frise-rang .frise-media:nth-child(4){width:calc(94 * var(--px))}
  .frise-rang .frise-media:nth-child(2),.frise-rang:nth-child(2) .frise-media:nth-child(3){width:calc(219 * var(--px))}
  .frise-rang .frise-media:nth-child(3),.frise-rang:nth-child(2) .frise-media:nth-child(2){width:calc(123 * var(--px))}
}

/* planche : une image cadrée */
.planche img{grid-column:2/12}
@media (max-width:600px){.planche .grille-page{display:block}}

/* immersion : image posée sur un fond qui glisse */
.immersion{overflow:hidden}
.immersion .grille-page{position:relative;z-index:1}
.immersion-media{grid-column:2/12;margin:calc(200 * var(--px)) 0}
.immersion-fond{position:absolute;top:0;left:0;will-change:transform}
@media (max-width:600px){.immersion-media{grid-column:1/11;margin:calc(80 * var(--px)) 0}}

/* projet suivant */
.suite{position:relative;height:100vh;margin:0;overflow:hidden;cursor:pointer}
.suite-lien{position:absolute;inset:0;z-index:5}
.suite-cadre{position:absolute;inset:0;display:flex;align-items:center}
.suite-tete{z-index:2;margin-left:calc(223 * var(--px));color:var(--blanc)}
.suite-mention{margin-bottom:1.5em;opacity:.8;font:500 calc(var(--te)*var(--px))/1 var(--titre);text-transform:uppercase;letter-spacing:.08em}
.suite-sous-titre{color:var(--blanc-80)}
.suite-cercle{width:calc(30 * var(--px));height:calc(30 * var(--px));margin-top:calc(10 * var(--px));transform:rotate(-90deg);fill:none}
.suite-cercle circle{fill:none;stroke:currentColor;stroke-width:1.5}
.suite-cercle circle:first-child{stroke-opacity:.5}
.suite-cercle circle:last-child{stroke-dasharray:1;stroke-dashoffset:1}
.suite-vignette{position:absolute;top:50%;left:50%;z-index:2;width:calc(318 * var(--px));height:calc(396 * var(--px));translate:-50% -50%;overflow:hidden}
.suite-vignette img{position:absolute;left:0;right:0;top:0}
.suite-fond{position:absolute;inset:0;background:var(--bordeaux)}
.suite-fond img{position:absolute;left:0;top:0;will-change:transform}
@media (max-width:600px){
  .suite-tete{margin-left:calc(93 * var(--px))}
  .suite-titre{margin-bottom:calc(3 * var(--px))}
  .suite-cercle{position:absolute;left:calc(31 * var(--px));top:50%;width:calc(33 * var(--px));height:calc(33 * var(--px));transform:rotate(-90deg) translateX(50%)}
  .suite-vignette{display:none}
  .suite-fond img{inset:0;height:100%}
}

/* diaporama de recherches posé sous un texte */
.recherches{padding:4vw calc(130 * var(--px)) 0}
.recherches.fonce{background:var(--bordeaux);color:var(--blanc)}
.recherches .diaporama{max-width:62.5vw;margin-left:auto}
@media (max-width:600px){.recherches{padding:8vw calc(20 * var(--px)) 0}.recherches .diaporama{max-width:none}}

/* 8. À propos ------------------------------------------------------------ */
.publics{position:relative;display:block;min-height:2em}
.publics-item{position:absolute;top:0;left:0;display:block;max-width:87.5%;margin-top:.15em}
.publics-item:first-child{position:relative}
.publics-item .rang-texte{display:block;overflow:hidden;margin:-.2em 0}
.publics-item .rang-texte>span{display:block;padding:.1em 0;transform:translateY(130%);transition:transform 0s var(--souple)}
.publics-item.est-actif .rang-texte>span{transform:none;transition-duration:1s}
.publics-item.est-actif .rang-texte:nth-child(1)>span{transition-delay:.2s}
.publics-item.est-actif .rang-texte:nth-child(2)>span{transition-delay:.3s}
.publics-item.est-actif .rang-texte:nth-child(3)>span{transition-delay:.4s}
.publics-item.est-sortant .rang-texte>span{transform:translateY(-130%);transition-duration:1s}
.publics-item.est-sortant .rang-texte:nth-child(1)>span{transition-delay:.1s}
.publics-item.est-sortant .rang-texte:nth-child(2)>span{transition-delay:.2s}
.publics-item.est-sortant .rang-texte:nth-child(3)>span{transition-delay:.3s}
.manifeste-texte .vous-etes{display:block}
.attentes{position:relative;border-top:1px solid var(--rose);border-bottom:1px solid var(--rose)}
@media (min-width:700px){.attentes{padding:1.25rem 0 15rem}}
@media (max-width:699px){
  .attentes{padding-bottom:5rem}
  .attentes .rangee{margin-right:-1.25rem}
  .attentes .rangee>*{padding:1.25rem 1.25rem 0 0}
  .attentes .rangee>*:first-child{padding-bottom:1.25rem;border-bottom:1px solid}
}

.methode{overflow:hidden;background:var(--bordeaux);color:var(--rose);padding:calc(200 * var(--px)) 0}
.methode-cadre{margin:0 var(--marge)}
.methode .etiquette{color:var(--blanc)}
.methode-intro{width:calc(585 * var(--px));margin:calc(70 * var(--px)) 0 calc(110 * var(--px))}
.methode-etapes{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte)}
.methode-etape{position:relative}
.methode-etape:nth-child(1){grid-column:3/7}
.methode-etape:nth-child(2){grid-column:8/12;margin-top:calc(150 * var(--px))}
.methode-etape:nth-child(2) .methode-nom{padding-right:calc(70 * var(--px))}
.methode-etape:nth-child(4){grid-column:2/5}
.methode-etape:nth-child(5){grid-column:7/10;margin-top:calc(150 * var(--px))}
.methode-nom{margin-bottom:calc(25 * var(--px))}
.methode-image{margin-bottom:calc(35 * var(--px));overflow:hidden}
.methode-image img{aspect-ratio:4/3}
.methode-numero{position:absolute;left:calc(-45 * var(--px));top:0;color:var(--rose-80)}
.methode-texte{max-width:calc(277 * var(--px))}
.methode-texte p{color:var(--rose-80)}
.methode-bandeau{grid-column:1/13;margin:calc(150 * var(--px)) calc(-120 * var(--px));white-space:nowrap}
.methode-piste{display:inline-flex;white-space:nowrap;will-change:transform}
.methode-piste>span{display:flex;align-items:center}
.methode-piste svg{width:calc(169 * var(--px));height:calc(78 * var(--px));margin:0 calc(60 * var(--px)) 0 calc(80 * var(--px))}
@media (max-width:600px){
  .methode{padding:calc(80 * var(--px)) 0}
  .methode-intro{width:auto;margin:calc(45 * var(--px)) 0 calc(70 * var(--px))}
  .methode-etapes{display:block}
  .methode-etape{display:grid;grid-template-columns:repeat(10,1fr);margin:0 0 calc(70 * var(--px))!important}
  .methode-etape:last-child{margin:0!important}
  .methode-numero{position:static;grid-column:1/2}
  .methode-image{grid-column:3/10;margin-bottom:calc(23 * var(--px))}
  .methode-nom{grid-column:3/10;margin-bottom:calc(23 * var(--px));padding-right:0!important}
  .methode-texte{grid-column:3/10;max-width:none}
  .methode-bandeau{margin:calc(100 * var(--px)) 0}
  .methode-piste svg{width:calc(65 * var(--px));height:calc(30 * var(--px));margin:0 calc(17 * var(--px)) 0 calc(23 * var(--px))}
}

.parcours{background:var(--blanc);padding:0 0 calc(187 * var(--px))}
.parcours-cadre{margin:0 var(--marge)}
.parcours-images{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte)}
.parcours-image{overflow:hidden}
.parcours-image:nth-child(1){grid-column:1/5;height:calc(536 * var(--px))}
.parcours-image:nth-child(2){grid-column:6/11;height:calc(322 * var(--px));margin-top:calc(125 * var(--px))}
.parcours-image:nth-child(3){grid-column:10/12;height:calc(244 * var(--px));margin-top:calc(-250 * var(--px));z-index:1}
.parcours-texte{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--goutte);margin-top:calc(100 * var(--px))}
.parcours-texte .etiquette{grid-column:1/3;align-self:flex-end}
.parcours-titre,.parcours-corps{grid-column:3/10}
.parcours-corps{color:var(--bordeaux-60);margin-top:calc(53 * var(--px))}
.parcours-corps ul{line-height:calc(32 * var(--px))}
.parcours-corps strong{font-family:var(--titre);font-weight:500}
.parcours-outils{margin-top:1.5em;opacity:.8}
@media (max-width:600px){
  .parcours{padding:calc(80 * var(--px)) 0}
  .parcours-cadre{margin:0 calc(31 * var(--px))}
  .parcours-corps li:nth-child(6){margin-top:calc(23 * var(--px))}
  .parcours-images{grid-template-columns:repeat(10,1fr);column-gap:0}
  .parcours-image:nth-child(1){display:none}
  .parcours-image:nth-child(2){grid-column:1/8;height:calc(169 * var(--px));margin-top:0}
  .parcours-image:nth-child(3){grid-column:7/11;height:calc(188 * var(--px));margin-top:calc(-128 * var(--px))}
  .parcours-texte{display:block;margin-top:calc(85 * var(--px))}
  .parcours-titre{margin:calc(41 * var(--px)) 0 calc(20 * var(--px))}
  .parcours-corps{margin-top:0;color:var(--bordeaux)}
  .parcours-corps ul{font-size:calc(var(--t4)*var(--px));line-height:calc(30 * var(--px))}
}

/* 9. Contact ------------------------------------------------------------- */
.contact{background:var(--blanc);overflow:hidden;display:flex;flex-direction:column;justify-content:center;height:100vh;padding:calc(120 * var(--px)) 0}
.contact-cadre{position:relative;margin:0 var(--marge)}
.contact-portrait{position:relative;z-index:1;width:calc(380 * var(--px));height:calc(567 * var(--px));margin-left:calc(513 * var(--px))}
.contact-portrait img{height:100%}
.contact-bandeau{position:absolute;bottom:calc(288 * var(--px));display:flex;margin-left:calc(-120 * var(--px));font-family:var(--titre);font-size:calc(var(--t1)*var(--px));line-height:calc(var(--i1)*var(--px));letter-spacing:calc(var(--a1)*var(--px))}
.contact-piste{display:flex;white-space:nowrap;will-change:transform}
.contact-gauche,.contact-droite{position:absolute;bottom:0}
.contact-droite{left:calc(1027 * var(--px))}
.contact-texte{width:calc(308 * var(--px));margin-bottom:calc(90 * var(--px))}
.contact-liens li:first-child{margin-bottom:calc(20 * var(--px))}
.contact-adresse{display:block;margin-bottom:calc(40 * var(--px))}
@media (max-width:600px){
  .contact{height:auto;display:block;padding:calc(150 * var(--px)) 0 calc(80 * var(--px))}
  .contact-portrait{width:calc(250 * var(--px));height:calc(374 * var(--px));margin:0 auto calc(76 * var(--px))}
  .contact-bandeau{bottom:auto;top:calc(150 * var(--px));margin-left:calc(-30 * var(--px));font-size:calc(var(--t0)*var(--px));line-height:calc(var(--i0)*var(--px));letter-spacing:calc(var(--a0)*var(--px))}
  .contact-gauche,.contact-droite{position:static}
  .contact-texte{width:auto;margin:0 calc(30 * var(--px)) calc(31 * var(--px)) 0}
  .contact-texte p{font-size:calc(var(--t3)*var(--px));line-height:calc(var(--i3)*var(--px));letter-spacing:calc(var(--a3)*var(--px))}
  .contact-liens li:first-child{margin-bottom:calc(20 * var(--px))}
  .contact-adresse{margin:calc(38 * var(--px)) 0 calc(21 * var(--px))}
}

/* mot de la fin (contacts, crédits, « À bientôt. ») */
.fin{padding-top:6rem;background:var(--rose);color:#111}
.fin-colonnes{padding-bottom:3.75rem;border-bottom:1px solid #111}
.fin-colonnes>.rangee{column-gap:0}
.fin-liste{padding-top:1.25rem}
.fin-liste p{display:inline-block}
.fin-liste a{position:relative;display:inline-block}
.fin-liste a svg{color:#000;position:absolute;left:100%;top:50%;width:12px;height:12px;opacity:0;transform:translateY(-50%);transition:opacity .3s var(--doux),transform .3s var(--doux)}
.souris .fin-liste a:hover svg,.fin-liste a:focus-visible svg{opacity:1;transform:translate(50%,-50%)}
.monte{opacity:0;transform:translateY(1.875rem);transition:opacity .6s var(--doux),transform .6s var(--doux)}
.est-visible .monte,.monte.est-visible{opacity:1;transform:none}
.monte.r3{transition-delay:.3s}.monte.r4{transition-delay:.4s}.monte.r5{transition-delay:.5s}.monte.r6{transition-delay:.6s}
.fin-credits li{opacity:0;transform:translateY(1.875rem);transition:opacity .6s var(--doux),transform .6s var(--doux)}
.fin-credits li:nth-child(1){transition-delay:.5s}.fin-credits li:nth-child(2){transition-delay:.6s}.fin-credits li:nth-child(3){transition-delay:.7s}.fin-credits li:nth-child(4){transition-delay:.8s}
.fin-credits.est-visible li{opacity:1;transform:none}
.fin-credits .rangee{grid-template-columns:1fr 1fr}
.fin-bientot .lettre{display:inline-block;min-width:.18em}
.fin-bientot .mot{display:inline-block;opacity:0;transform:translateY(100%);transition:opacity .6s var(--doux),transform .6s var(--doux)}
.fin-bientot .mot+.mot{margin-left:.25em}
.fin-bientot.est-visible .mot{opacity:1;transform:none}
.fin-bientot.est-visible .mot:nth-child(1){transition-delay:.4s}
.fin-bientot.est-visible .mot:nth-child(2){transition-delay:.6s}
.fin-mention{padding:1.25rem 0;opacity:.8}
@media (max-width:1399px){.fin-mention{padding:.9375rem 0}}
@media (max-width:999px){.fin-colonnes>.rangee>*:not(:first-child):not(.fin-vide){margin-top:2.5rem}}

/* 10. Accessibilité ------------------------------------------------------ */
.evitement{position:fixed;left:1rem;top:1rem;z-index:1000;padding:.75rem 1rem;background:var(--bordeaux);color:var(--blanc);font:500 1rem/1 var(--titre);transform:translateY(-200%)}
.evitement:focus{transform:none}
.lecteur{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
main:focus{outline:0}
@media (prefers-reduced-motion:reduce){
  .bonjour{display:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}