:root{
  --encre:#15092F;
  --nuit:#1A0E38;
  --nuit-clair:#2A1A5C;
  --lilas:#9C8CF5;
  --lilas-pale:#CFC6FF;
  --craie:#F6F3FD;
  --papier:#FFFFFF;
  --gris:#6B6480;
  --gris-clair:#E4DEF3;
  --ocre:#E8A33D;
  --max:1160px;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.025em;
}
h1{font-size:clamp(2.6rem,6vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.3rem;letter-spacing:-0.015em}

p{max-width:64ch}

.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---------- navigation ---------- */
.barre{
  position:sticky;top:0;z-index:40;
  background:var(--nuit);
  color:var(--craie);
  border-bottom:1px solid rgba(246,243,253,.12);
}
.barre__contenu{display:flex;align-items:center;justify-content:space-between;height:72px}
.marque{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-0.02em;font-size:1.05rem}
/* Le logo remplace l'ancienne pastille « CT ». Hauteur calée sur celle de la
   pastille pour ne pas modifier l'équilibre de la barre ; la largeur suit le
   ratio 2:1 du sigle. La source est recolorée en craie : l'encre d'origine
   est à 1,02:1 du fond de la barre, donc invisible. */
.marque__logo{height:27px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:30px;font-size:.95rem}
.menu a{color:var(--lilas-pale);padding:6px 0;border-bottom:1.5px solid transparent}
.menu a:hover{color:var(--craie)}
.menu a.actif{color:var(--craie);border-bottom-color:var(--lilas)}
.menu .bouton-fin{
  border:1px solid rgba(246,243,253,.3);border-radius:10px;
  padding:9px 17px;color:var(--craie);
}
.menu .bouton-fin:hover{background:rgba(246,243,253,.1)}
.burger{display:none;background:none;border:0;color:var(--craie);font-size:1.5rem;cursor:pointer;line-height:1}

/* ---------- boutons ---------- */
.bouton{
  display:inline-block;border-radius:11px;padding:14px 26px;
  font-size:.98rem;font-weight:500;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.bouton--plein{background:var(--lilas);color:var(--nuit)}
.bouton--plein:hover{background:var(--lilas-pale)}
.bouton--ligne{border-color:rgba(246,243,253,.35);color:var(--craie)}
.bouton--ligne:hover{background:rgba(246,243,253,.1)}
.bouton--encre{background:var(--nuit);color:var(--craie)}
.bouton--encre:hover{background:var(--nuit-clair)}

/* ---------- hero ---------- */
.hero{background:var(--nuit);color:var(--craie);padding:96px 0 0;overflow:hidden}
.hero__grille{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end}
.hero h1{max-width:12ch}
.hero__note{color:var(--lilas-pale);font-size:1.1rem;margin:26px 0 34px;max-width:46ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:96px}
.hero__vitrine{
  transform:translateY(34px);
  border-radius:16px 16px 0 0;overflow:hidden;
  box-shadow:0 -2px 0 rgba(246,243,253,.14);
}
.hero__vitrine img{width:100%}

.bandeau{
  background:var(--nuit-clair);color:var(--lilas-pale);
  font-size:.9rem;padding:16px 0;
}
.bandeau__contenu{display:flex;gap:38px;flex-wrap:wrap;justify-content:space-between}
.bandeau strong{color:var(--craie);font-weight:600}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section--craie{background:var(--craie)}
.section__intro{max-width:56ch;margin-bottom:44px}
.section__intro p{color:var(--gris);margin-top:14px;font-size:1.05rem}

/* ---------- grille de projets ---------- */
.filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.filtre{
  background:transparent;border:1px solid var(--gris-clair);border-radius:999px;
  padding:8px 17px;font-size:.9rem;font-family:inherit;color:var(--gris);cursor:pointer;
}
.filtre:hover{border-color:var(--lilas);color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:var(--craie)}

.projets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.projet{display:block;border-radius:var(--r);overflow:hidden;background:var(--papier);border:1px solid var(--gris-clair)}
.projet__image{background:var(--craie);border-bottom:1px solid var(--gris-clair)}
.projet__image img{width:100%}
.projet__texte{padding:22px 24px 26px}
.projet__entete{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.projet h3{font-size:1.22rem}
.projet__lieu{font-size:.85rem;color:var(--gris);white-space:nowrap}
.projet p{color:var(--gris);font-size:.97rem;margin:9px 0 16px}
.etiquettes{display:flex;gap:7px;flex-wrap:wrap}
.etiquette{
  font-size:.8rem;padding:4px 11px;border-radius:999px;
  background:var(--craie);color:var(--nuit-clair);
}
.projet[hidden]{display:none}
.projet--large{grid-column:1 / -1}
.projet--large .projet__texte{padding:26px 30px 30px}

/* ---------- process ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--gris-clair)}
.etape{padding:30px 28px 34px;border-right:1px solid var(--gris-clair)}
.etape:last-child{border-right:0}
.etape__rang{
  font-family:"Bricolage Grotesque",sans-serif;font-size:.9rem;color:var(--lilas);
  display:block;margin-bottom:12px;
}
.etape h3{margin-bottom:8px}
.etape p{color:var(--gris);font-size:.97rem}

/* ---------- citation ---------- */
.citation{background:var(--nuit);color:var(--craie);padding:80px 0}
.citation blockquote{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;letter-spacing:-0.02em;
  max-width:20ch;
}
.citation__grille{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
.citation figcaption{color:var(--lilas-pale);font-size:.98rem}

/* ---------- appel final ---------- */
.appel{background:var(--craie);padding:76px 0}
.appel__boite{
  background:var(--nuit);color:var(--craie);border-radius:20px;
  padding:54px 48px;display:grid;grid-template-columns:1.4fr auto;gap:34px;align-items:center;
}
.appel h2{max-width:16ch}
.appel p{color:var(--lilas-pale);margin-top:14px}

/* ---------- étude de cas ---------- */
.cas__entete{background:var(--nuit);color:var(--craie);padding:80px 0 64px}
.cas__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px;border-top:1px solid rgba(246,243,253,.16);padding-top:26px}
.cas__meta dt{color:var(--lilas);font-size:.85rem;margin-bottom:5px}
.cas__meta dd{font-size:1rem}
.cas__corps{padding:72px 0}
.cas__grille{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start}
.cas__texte h3{margin:30px 0 10px}
.cas__texte h3:first-child{margin-top:0}
.cas__texte p{color:var(--gris);margin-bottom:14px}
.cas__planche{border:1px solid var(--gris-clair);border-radius:var(--r);overflow:hidden;margin-bottom:22px;background:var(--craie)}
.cas__legende{font-size:.88rem;color:var(--gris);padding:11px 16px;border-top:1px solid var(--gris-clair);background:var(--papier)}

/* ---------- pied ---------- */
.pied{background:var(--encre);color:var(--lilas-pale);padding:56px 0 34px;font-size:.95rem}
.pied__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(246,243,253,.13)}
.pied h4{color:var(--craie);font-size:.95rem;margin-bottom:12px;font-weight:600}
/* Le pied de page dispose de la place qui manque dans la barre : le logo
   complet y est posé, signature comprise, à une taille où elle se lit. */
.pied__logo{height:62px;width:auto;display:block;margin-bottom:16px}
.pied a:hover{color:var(--craie)}
.pied ul{list-style:none;display:grid;gap:8px}
.pied__bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:.87rem}

:focus-visible{outline:2px solid var(--lilas);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

@media (max-width:900px){
  .hero__grille,.citation__grille,.cas__grille,.appel__boite{grid-template-columns:1fr}
  .hero{padding-top:64px}
  .hero__actions{padding-bottom:52px}
  .hero__vitrine{transform:none;border-radius:16px;margin-bottom:-36px}
  .projets{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .etape{border-right:0;border-bottom:1px solid var(--gris-clair)}
  .cas__meta{grid-template-columns:repeat(2,1fr)}
  .pied__grille{grid-template-columns:1fr 1fr}
  .section{padding:64px 0}
  .appel__boite{padding:38px 28px}
}

@media (max-width:720px){
  .burger{display:block}
  .menu{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--nuit);flex-direction:column;align-items:stretch;gap:0;
    padding:10px 28px 22px;border-bottom:1px solid rgba(246,243,253,.15);
  }
  .menu.ouvert{display:flex}
  .menu a{padding:13px 0}
  .menu .bouton-fin{text-align:center;margin-top:10px}
}