/* Cas clients : cartes de la liste et gabarit des pages de cas (outils/seo/cas.mjs).
   Survol des cartes repris des cartes d'Actualités : trait bleu canard qui se déroule sur toute la largeur en haut, case noire et flèche qui glisse. */

/* ---------- Cartes ---------- */
.cl-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.cl-item{display:flex;min-width:0;scroll-margin-top:calc(var(--nav) + 24px)}
.cl-item[hidden]{display:none}
.cl-carte{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet);transition:box-shadow .15s var(--ease)}
.cl-carte::before{content:"";position:absolute;left:0;top:0;z-index:4;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.cl-vis{position:relative;display:grid;place-items:center;aspect-ratio:5/4;margin:1px 1px 0;overflow:hidden;background:#0A5457}
.cl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%)}
.cl-logo{position:relative;z-index:1;display:block;width:auto;max-width:180px;height:72px;object-fit:contain}
.cl-logo.mot{width:min(82%,300px);max-width:none;height:auto}
.cl-corps{display:flex;flex-direction:column;gap:10px;padding:calc(var(--m) * .4) calc(var(--m) * .45) calc(var(--m) * .45)}
.cl-corps h3,.cl-corps h2{font-size:clamp(22px,1.7vw,26px);font-weight:500;line-height:1.14;letter-spacing:-.03em}
.cl-corps a{text-decoration:none}
.cl-corps a::after{content:"";position:absolute;inset:0;z-index:3}
.cl-corps a:focus-visible{outline:none}
.cl-carte:has(a:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.cl-res{font-size:15.5px;line-height:1.48;color:var(--gris);text-wrap:pretty}
.cl-bas{display:flex;align-items:stretch;min-height:calc(var(--m) * .9);margin:auto 0 0;box-shadow:inset 0 1px 0 var(--filet);font-size:13.5px;color:var(--gris)}
.cl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;flex:1;min-width:0;padding:8px calc(var(--m) * .45)}
.cl-meta .r{color:var(--encre);font-weight:500}
.cl-lire{display:flex;flex:none;align-items:center;gap:12px;padding:0 calc(var(--m) * .4);color:var(--encre);font-size:14px;font-weight:500;white-space:nowrap;box-shadow:inset 1px 0 0 var(--filet);transition:background-color .15s var(--ease),color .15s var(--ease)}
@media (hover:hover){
  .cl-carte:hover{box-shadow:inset 0 0 0 1px var(--teal-c)}
  .cl-carte:hover::before{transform:scaleX(1)}
  .cl-carte:hover .cl-lire{background:var(--encre);color:#fff}
  .cl-carte:hover .cl-lire .chev{transform:translateX(3px)}
}
.cl-carte:focus-within::before{transform:scaleX(1)}
.cl-carte:active .cl-lire{background:#000;color:#fff}

/* Références anonymes : aplat de couleur, le secteur en grand, un cran plus bas que les cas nommés */
.cl-aplat{aspect-ratio:16/9;place-items:end start;padding:calc(var(--m) * .45)}
.cl-aplat.profond{background:#073D40;color:#F8F4EC}
.cl-aplat.soutenu{background:#E7DFD0;color:#0A5457}
.cl-aplat.clair{background:#B4CFCA;color:#073D40}
.cl-grand{max-width:11em;font-size:clamp(26px,2.3vw,36px);font-weight:500;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}

@media (max-width:1000px) and (min-width:641px){
  .cl-grille{grid-template-columns:1fr}
  .cl-carte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto}
  .cl-vis{grid-row:1/3;aspect-ratio:auto;min-height:calc(var(--m) * 5.5);margin:1px 0 1px 1px}
  .cl-aplat{min-height:calc(var(--m) * 4)}
  .cl-bas{grid-column:2}
}
@media (max-width:640px){
  .cl-grille{grid-template-columns:1fr;gap:16px}
  .cl-vis{aspect-ratio:4/3}
  .cl-aplat{aspect-ratio:auto;min-height:150px;padding:18px}
  .cl-grand{font-size:28px}
  .cl-corps{padding:18px 16px 20px}
  .cl-meta{padding:8px 16px}
  .cl-lire{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){.cl-carte,.cl-carte::before,.cl-lire{transition:none}}

/* ---------- Page de cas : « Diptyque » à la hauteur de l'écran, puis un seul conteneur ---------- */
/* Premier écran en cases filetées. Ligne 1 : le nom en grand | la phrase. Ligne 2 : le logo du client (ou un mot sur aplat) | son fragment de montagne dans la brume.
   La dernière ligne absorbe la hauteur restante ; le premier écran grandit si son contenu dépasse. */
.cas-page{--canard:#073D40;--creme:#EEE7DA}
.cas-page h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.05em}
.cs-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav));border-bottom:1px solid var(--filet)}
.cs-ha{grid-column:1/3;display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--m) * 1.2);min-width:0;padding:calc(var(--m) * .3) var(--m) calc(var(--m) * .75) var(--cote)}
.cs-ha .hp-fil{flex-wrap:wrap;white-space:normal}
.cs-hero h1{font-size:var(--t-d1);line-height:.95;letter-spacing:-.056em;overflow-wrap:break-word}
.cs-hero h1 .ln{display:block}
.cs-hero h1 .cs-g{color:#8A867D}
.cs-hb{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:calc(var(--m) * .75) var(--cote) calc(var(--m) * .75) calc(var(--m) * .6);background:var(--case);box-shadow:inset 1px 0 0 var(--filet)}
.cs-acc{font-size:clamp(22px,1.9vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.cs-hc{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--m) * .5);min-width:0;padding:calc(var(--m) * .6) var(--m) calc(var(--m) * .6) var(--cote);background:var(--canard);color:#F8F4EC}
.cs-logo-i{display:block;align-self:flex-start;width:auto;height:calc(var(--m) * 2)}
.cs-logo-i.mot{width:min(100%,calc(var(--m) * 7.7));height:auto}
.cs-mot{font-size:clamp(36px,3.4vw,56px);font-weight:500;line-height:.95;letter-spacing:-.055em;color:#F8F4EC}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cs-hc :focus-visible{outline-color:#F8F4EC}
.cs-hc .btn.plein{background:#F8F4EC;color:var(--encre)}
.cs-hc .btn.plein:hover{background:#fff}
.cs-hc .btn.plein:active{background:#E9E5DB}
.cs-hd{grid-column:2/4;position:relative;min-height:calc(var(--m) * 4);overflow:hidden;box-shadow:inset 1px 0 0 var(--filet)}
.cs-hd .cs-vis{position:absolute;inset:0;overflow:hidden;background:var(--papier)}
.cs-vis-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Brume du premier écran : tuiles posées par benchmarks/jonction.js, poussées par la souris (assets/nuages.js), fixes au toucher et en mouvement réduit */
.cs-brume{position:absolute;inset:0;pointer-events:none}
.cs-brume .nuages{position:absolute;left:-20%;width:140%;height:72%}
.cs-brume .nuages.arr{bottom:-30%;opacity:.8}
.cs-brume .nuages.av{bottom:-44%}
.cs-brume .tuile{position:absolute;top:0;height:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);will-change:transform,opacity}
.cs-brume .tuile img{position:absolute;top:0;height:100%;display:block}
.cs-brume .nuages.arr img{filter:blur(12px);transform:scaleX(-1)}
.cs-brume .nuages.av img{filter:blur(16px)}

.cs-projet{padding-top:calc(var(--m) * 1.5);padding-bottom:calc(var(--m) * 1.5)}
.cs-conteneur{background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}

/* Le paragraphe domine : grand corps, largeur de lecture */
.cs-recit{max-width:33em;padding:calc(var(--m) * 1.1) var(--m) calc(var(--m) * 1.1);font-size:clamp(22px,2.05vw,31px);line-height:1.32;letter-spacing:-.022em;text-wrap:pretty}
.cs-recit .nw{white-space:nowrap}

/* Ce qui a été livré : la mosaïque de cases. Pleines : les pièces livrées. Aplats : la palette de l'accueil. */
.cs-construit{container-type:inline-size;border-top:1px solid var(--filet)}
.cs-tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:start;padding:calc(var(--m) * .9) var(--m)}
.cs-tete h2{grid-column:1/8}
.cs-grand{grid-column:8/-1;padding-top:.3em;font-size:clamp(20px,1.7vw,26px);font-weight:500;line-height:1.18;letter-spacing:-.03em;color:var(--gris);text-wrap:balance}
.cs-mosaique{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(calc(100cqw / 6),auto);margin:0;padding:0;list-style:none}
.cs-cube,.cs-cube-d{min-width:0}
.cs-cube.large{grid-column:span 2}
.cs-cube{display:flex;flex-direction:column;gap:12px;padding:calc(var(--m) * .4) calc(var(--m) * .4) calc(var(--m) * .45)}
.cs-cube.fonce{background:var(--canard);color:#F8F4EC}
.cs-cube.clair{background:var(--creme);color:var(--encre)}
.cs-cube-n{font-size:13px;font-weight:500;opacity:.75}
.cs-cube-ic{width:28px;height:28px}
.cs-cube-c{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.cs-cube-c b{font-size:clamp(19px,1.55vw,24px);font-weight:500;line-height:1.05;letter-spacing:-.035em;overflow-wrap:break-word;hyphens:auto}
.cs-cube-c span{max-width:22em;font-size:14px;line-height:1.4;text-wrap:pretty}
.cs-cube.fonce .cs-cube-c span{color:#B4CFCA}
.cs-cube.clair .cs-cube-c span{color:var(--gris)}
.cs-cube-d.k-c{background:#B4CFCA}
.cs-cube-d.k-t{background:#0D7377}
.cs-cube-d.k-p{background:#E6DED0}
.cs-cube-d.k-f{background:#0A5457}
.cs-cube-d.k-r{background:var(--rouge)}

/* Les cases se posent au défilement. Transform et opacité seulement ; la classe n'est posée par assets/cas.js
   qu'avec JavaScript et sans mouvement réduit, le contenu reste donc lisible sans. */
.cs-anime .cs-mosaique>li{opacity:0;transform:scale(.94)}
.cs-anime .cs-mosaique.vu>li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 45ms)}

@media (min-width:761px) and (max-width:1100px){
  .cs-hero{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr}
  .cs-ha{grid-column:1/-1}
  .cs-hb{grid-column:1/-1;padding-left:var(--cote);box-shadow:inset 0 1px 0 var(--filet)}
  .cs-hd{grid-column:2/3}
  .cs-tete h2{grid-column:1/-1}
  .cs-grand{grid-column:1/-1;padding-top:20px}
  .cs-mosaique{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(calc(100cqw / 5),auto);gap:2px}
  .cs-cube-d{display:none}
  .cs-cube.large{grid-column:auto}
  .cs-cube:nth-child(odd of .cs-cube):nth-last-child(1 of .cs-cube){grid-column:1/-1}
}
@media (max-width:760px){
  .cs-hero h1{font-size:clamp(34px,10.4vw,56px);line-height:1;letter-spacing:-.05em}
  .cs-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  .cs-ha,.cs-hb,.cs-hc{grid-column:1;padding:24px 16px}
  .cs-ha{gap:48px;padding-top:4px}
  .cs-hb{box-shadow:inset 0 1px 0 var(--filet)}
  .cs-hd{grid-column:1;order:3;min-height:75vw;box-shadow:none}
  .cs-hc{order:4;gap:28px}
  .cs-logo-i{height:88px}
  .cs-projet{padding-top:48px;padding-bottom:48px}
  .cs-recit{padding:28px 20px 32px;font-size:21px;line-height:1.36}
  .cs-tete{display:flex;flex-direction:column;gap:14px;padding:28px 20px}
  .cs-grand{padding-top:0;font-size:20px}
  .cs-mosaique{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
  .cs-cube,.cs-cube.large{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;column-gap:14px;padding:20px}
  .cs-cube-n{order:2;margin-left:auto}
  .cs-cube-c{order:3;flex-basis:100%;margin-top:8px}
  .cs-cube-d{display:none;order:1;aspect-ratio:1}
  .cs-cube-d.m{display:block}
}
@media (prefers-reduced-motion:reduce){.cs-mosaique>li{transition:none}}