/* Page "Le projet" - styles specifiques (le commun est dans main.css). */

.page-hero{background:var(--sarcelle-encre);color:var(--papier);padding:56px 0}
.page-hero .eyebrow{color:var(--sarcelle);margin-bottom:16px}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.5vw,46px);line-height:1.1}
.page-hero .sub{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(251,248,242,0.7);margin-top:14px}
.hero-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.hero-strip .ph{height:150px;border-radius:10px;background:linear-gradient(135deg,#3a342c,#2a2622);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:rgba(251,248,242,0.5);text-align:center;padding:0 10px}

section{padding:60px 0}
.sec-head{margin-bottom:28px}
.sec-head .eyebrow{color:var(--sarcelle-fonce)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.5vw,34px);line-height:1.12;margin-top:8px}
.prose{font-size:16px;color:#3A352E;line-height:1.75;max-width:760px}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}

.intro-proj{border-bottom:0.5px solid rgba(28,26,23,0.1)}

/* Galerie */
.reproduction{border-bottom:0.5px solid rgba(28,26,23,0.1)}
.repro-lead{font-size:15px;color:#3A352E;max-width:760px;margin-bottom:24px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gallery .ph{height:230px;border-radius:10px;background:var(--kraft);border:0.5px solid rgba(28,26,23,0.12);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--acier);text-align:center;padding:0 12px}

/* Sous-ensembles */
.sousens{background:var(--sarcelle-encre);color:var(--papier)}
.sousens .sec-head h2{color:var(--papier)}
.sousens .sec-head .eyebrow{color:var(--sarcelle)}
.sousens-intro{font-size:14px;color:rgba(251,248,242,0.7);max-width:620px;margin-bottom:30px}
.se-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.se-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.12);border-radius:10px;padding:18px 16px;transition:all .2s;cursor:pointer;display:block}
.se-card:hover{background:rgba(32,188,180,0.16);border-color:var(--sarcelle)}
.se-ico{font-size:24px;color:var(--papier);margin-bottom:10px}
.se-name{font-family:var(--serif);font-size:16px;font-weight:500}
.se-link{font-family:var(--mono);font-size:10px;color:rgba(251,248,242,0.5);margin-top:10px;display:flex;align-items:center;gap:5px}
.se-card:hover .se-link{color:var(--sarcelle)}

/* Timeline */
.timeline-sec{border-bottom:0.5px solid rgba(28,26,23,0.1)}
.timeline{position:relative;max-width:760px;margin:8px auto 0;padding-left:38px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:rgba(28,26,23,0.14)}
.tl-progress{position:absolute;left:11px;top:8px;width:2px;height:0;background:linear-gradient(var(--sarcelle),var(--sarcelle-fonce));transition:height .15s linear;z-index:1}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-34px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--papier);border:3px solid rgba(28,26,23,0.2);z-index:2;transition:border-color .35s,background .35s,transform .35s}
.tl-item.active::before{border-color:var(--sarcelle-fonce);background:var(--sarcelle-fonce);transform:scale(1.15);box-shadow:0 0 0 5px rgba(21,147,140,0.16)}
.tl-year{font-family:var(--serif);font-weight:600;font-size:19px;color:rgba(28,26,23,0.4);margin-bottom:6px;transition:color .35s}
.tl-item.active .tl-year{color:var(--sarcelle-fonce)}
.tl-item ul{list-style:none}
.tl-item li{font-size:14px;color:rgba(58,53,46,0.5);padding:2px 0 2px 14px;position:relative;transition:color .35s}
.tl-item.active li{color:#3A352E}
.tl-item li::before{content:"·";position:absolute;left:2px;color:var(--ocre);font-weight:700}
/* Bouton « Bilan de la journée académique » (PDF) en bas d'une étape. */
.tl-bilan{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:600;color:var(--sarcelle-fonce);text-decoration:none;border:1px solid var(--sarcelle);border-radius:8px;padding:8px 14px;transition:background .2s,color .2s}
.tl-bilan:hover{background:var(--sarcelle);color:var(--sarcelle-encre)}
.tl-bilan i{font-size:16px}

/* Organisation */
.orga{background:var(--kraft);border-bottom:0.5px solid rgba(28,26,23,0.1)}
.orga-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;margin-bottom:36px;background:var(--papier);border:0.5px solid rgba(28,26,23,0.14);border-radius:12px;padding:28px}
.partenaires-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plogo{height:72px;border-radius:8px;background:#fff;border:0.5px solid rgba(28,26,23,0.12);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--acier);text-align:center;padding:6px}
.orga-photo{height:210px;border-radius:10px;background:var(--kraft);border:0.5px solid rgba(28,26,23,0.12);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--acier);text-align:center;padding:10px}
.cmv{background:#fff;border:0.5px solid rgba(28,26,23,0.14);border-radius:12px;padding:28px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
.cmv .badge{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--sarcelle-fonce);margin-bottom:8px}
.cmv h3{font-family:var(--serif);font-size:22px;margin-bottom:14px}
.cmv ul{list-style:none}
.cmv li{font-size:14px;color:#3A352E;padding:3px 0 3px 16px;position:relative}
.cmv li::before{content:"·";position:absolute;left:4px;color:var(--sarcelle-fonce);font-weight:700}
/* Paragraphe(s) sous la liste : même typo que les puces + plus d'espacement. */
.cmv p{font-size:14px;line-height:1.6;color:#3A352E;margin-top:22px}
.cmv-photo{height:210px;border-radius:10px;background:var(--kraft);border:0.5px solid rgba(28,26,23,0.12);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--acier);text-align:center;padding:10px}

/* CTA (.btn-solid est commun) */
.cta-proj{background:var(--sarcelle-encre);color:var(--papier);text-align:center}
.cta-proj .eyebrow{color:var(--sarcelle);margin-bottom:10px}
.cta-proj h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.5vw,32px);margin-bottom:22px}

@media(max-width:860px){
  .hero-strip{grid-template-columns:1fr 1fr}
  .se-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .orga-grid{grid-template-columns:1fr}
  .cmv{grid-template-columns:1fr}
}
/* Cible du lien « Cercle des Machines Volantes » depuis l'introduction */
.cmv{scroll-margin-top:104px}
.proj-video-cta{margin:6px 0 18px;text-align:left}

/* Introduction : logo du partenaire (CMV) a droite du texte */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:44px;align-items:start}
.intro-grid.sans-logo{display:block}
.cmv-aside{text-align:center;position:sticky;top:104px}
.cmv-aside img{width:100%;max-width:170px;height:auto;display:block;margin:0 auto;
  transition:transform .2s}
.cmv-aside a:hover img{transform:scale(1.04)}
.cmv-aside-mention{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--sarcelle-fonce);line-height:1.5}
@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr;gap:28px}
  .cmv-aside{position:static;text-align:left}
  .cmv-aside img{margin:0;max-width:140px}
}
/* Sous-liste des fournitures du CMV */
.cmv ul ul{margin:9px 0 4px;padding-left:14px;list-style:none}
.cmv ul ul li{font-size:13px;line-height:1.6;padding:2px 0 2px 14px;letter-spacing:0.01em;color:#4a443c}
.cmv ul ul li::before{content:"-";left:2px;font-weight:500;color:var(--acier)}
/* Bloc CMV : logo au-dessus de la photo */
.cmv-media{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cmv-media .cmv-logo{width:100%;max-width:70px;height:auto;display:block}
.cmv-media .cmv-photo{width:100%}
/* Façade vidéo du bloc CMV (le lecteur YouTube ne se charge qu'au clic). */
.cmv-video{position:relative;width:100%;aspect-ratio:16/9;border:none;border-radius:10px;overflow:hidden;background:#141210;cursor:pointer;padding:0;display:block}
.cmv-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--sarcelle-encre);display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .2s,background .2s}
.cmv-video:hover .cmv-video-play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.cmv-video-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.cmv-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Organigramme du projet : partenaires et interlocuteurs --- */
.orga-chart{display:flex;flex-direction:column;gap:14px}
/* Chaque partenaire dans son propre bloc, comme les autres cartes du site */
.orga-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:34px;
  align-items:center;background:var(--papier);border:0.5px solid rgba(28,26,23,0.14);
  border-radius:12px;padding:24px 28px}
.orga-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.orga-logos img{height:46px;width:auto;max-width:110px;object-fit:contain;display:block}
.orga-nom{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.25;color:var(--sarcelle-encre)}
.orga-sous{font-size:12.5px;font-style:italic;color:#4a443c;line-height:1.45;margin-top:3px}
.orga-role{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--sarcelle-fonce);margin-top:7px}
.orga-gens{display:flex;flex-wrap:wrap;gap:22px}
.orga-gens figure{margin:0;width:104px;text-align:center}
.orga-gens img{width:104px;height:104px;object-fit:cover;border-radius:8px;display:block;
  border:0.5px solid rgba(28,26,23,0.12);background:var(--kraft)}
.orga-gens figcaption{margin-top:8px;font-size:12px;line-height:1.35;color:#3A352E}
@media(max-width:860px){
  .orga-row{grid-template-columns:1fr;gap:18px;padding:20px}
  .orga-gens{gap:14px}
  .orga-gens figure{width:88px}
  .orga-gens img{width:88px;height:88px}
}
/* Deux partenaires cote a cote (associations maitres d'oeuvre).
   La colonne du milieu (--duogap) recoit la fleche d'echange horizontale. */
.orga-duo{display:grid;grid-template-columns:1fr var(--duogap) 1fr;gap:0}
.orga-duo .orga-row{grid-template-columns:minmax(0,165px) minmax(0,1fr);gap:22px;align-items:center}
.orga-duo .orga-gens{gap:16px}
@media(max-width:860px){.orga-duo{grid-template-columns:1fr;gap:14px}}
/* Bloc a la largeur d'une tuile de rangee double, cale a gauche (Academie).
   Les infos de la structure passent au-dessus, les portraits en dessous. */
.orga-demi{display:grid;grid-template-columns:1fr var(--duogap) 1fr;gap:0}
.orga-demi > .orga-row{grid-column:1;grid-template-columns:1fr;gap:18px;align-items:start}
.orga-demi .orga-gens{gap:16px}
.orga-demi .orga-gens figure{width:112px}
.orga-demi .orga-gens img{width:112px;height:112px}
@media(max-width:860px){.orga-demi{grid-template-columns:1fr;gap:14px}}
/* Bloc CMV place a la suite du texte d'introduction */
.intro-proj .cmv{margin-top:34px}
/* Lightbox du bloc CMV (ouverte par le lien de l'intro), adaptée à sa taille. */
.cmv-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(20,18,15,0.72)}
.cmv-lb.open{display:flex}
.cmv-lb-frame{position:relative;width:100%;max-width:880px}
.cmv-lb .cmv{margin:0;max-height:90vh;overflow:auto;box-shadow:0 24px 70px -24px rgba(0,0,0,.55)}
.cmv-lb-close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:none;border-radius:50%;background:rgba(28,26,23,0.6);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cmv-lb-close:hover{background:rgba(28,26,23,0.85)}
/* Nom et fonction sous chaque portrait */
.orga-gens figcaption .pnom{display:block;font-weight:600;color:var(--encre)}
.orga-gens figcaption .pfonc{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--acier)}
.orga-gens figure{width:126px}
.orga-gens img{width:126px;height:126px}
.orga-duo .orga-gens figure{width:112px}
.orga-duo .orga-gens img{width:112px;height:112px}
@media(max-width:860px){
  .orga-gens figure,.orga-duo .orga-gens figure{width:96px}
  .orga-gens img,.orga-duo .orga-gens img{width:96px;height:96px}
}

/* Connecteurs de l'organigramme. Reperes horizontaux : centre d'un bloc pleine
   largeur, et centres des deux blocs d'une rangee double (gap de 14px). */
.orga-chart{gap:0;--c:var(--sarcelle-fonce);--e:3px;--duogap:56px;
  --centre:calc(50% - 1.5px);
  --gauche:calc(25% - var(--duogap) / 4 - 1.5px);
  --droite:calc(75% + var(--duogap) / 4 - 1.5px)}
.orga-simple,.orga-duo{position:relative}
.orga-lien,.orga-fourche,.orga-montee{position:relative}
.orga-lien .tige,.orga-fourche .tige-haut,.orga-fourche .branche{position:absolute;width:var(--e);background:var(--c)}
.orga-fourche .barre{position:absolute;height:var(--e);background:var(--c)}
/* pointes */
.orga-lien .tige::after,.orga-fourche .branche::after{content:"";position:absolute;left:-5.5px;top:100%;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--c)}
.orga-montee .branche::after{content:"";position:absolute;left:-5.5px;bottom:100%;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--c)}

/* 1. bloc plein -> bloc plein : trait centre */
.orga-lien{height:46px}
.orga-lien .tige{left:var(--centre);top:0;height:34px}

/* 2. bloc plein -> deux blocs : fourche vers les deux centres */
.orga-fourche{height:60px}
.orga-fourche .tige-haut{left:var(--centre);top:0;height:22px}
.orga-fourche .barre{left:var(--gauche);top:22px;width:calc(var(--droite) - var(--gauche) + var(--e))}
.orga-fourche .branche{top:22px;height:26px}
.orga-fourche .branche.gauche{left:var(--gauche)}
.orga-fourche .branche.droite{left:var(--droite)}

/* 3. Association Late 28 <-> Academie : echange dans les deux sens, tout droit.
   Les deux pointes (11px chacune) sont comprises dans la hauteur du connecteur :
   11 + 24 + 11 = 46px, donc rien ne deborde sur les tuiles. */
.orga-montee{height:46px}
.orga-montee .tige{position:absolute;left:var(--gauche);top:11px;height:24px;
  width:var(--e);background:var(--c)}
.orga-montee .tige::before{content:"";position:absolute;left:-5.5px;bottom:100%;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--c)}
.orga-montee .tige::after{content:"";position:absolute;left:-5.5px;top:100%;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--c)}

/* 4. Association Late 28 <-> Association CMV : echange horizontal, dans la
   gouttiere de la rangee double. 11 + 34 + 11 = 56px, la largeur de --duogap. */
.orga-lienh{position:relative;width:var(--duogap);height:22px;align-self:center}
.orga-lienh .tige{position:absolute;left:11px;right:11px;top:calc(50% - var(--e) / 2);
  height:var(--e);background:var(--c)}
.orga-lienh .tige::before{content:"";position:absolute;right:100%;top:-5.5px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:11px solid var(--c)}
.orga-lienh .tige::after{content:"";position:absolute;left:100%;top:-5.5px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--c)}

@media(max-width:860px){
  /* une seule colonne : tous les reperes se confondent avec le centre */
  .orga-chart{--gauche:var(--centre);--droite:var(--centre)}
  .orga-fourche .barre{width:var(--e)}
  .orga-fourche .branche.droite{display:none}
  /* la fleche d'echange bascule a la verticale entre les deux blocs empiles */
  .orga-lienh{width:var(--duogap);height:var(--duogap);justify-self:center}
  .orga-lienh .tige{transform:rotate(90deg)}
}
/* Espace entre deux blocs qui ne sont pas relies par un connecteur */
.orga-chart > * + *{margin-top:30px}
.orga-chart > .orga-lien,.orga-chart > .orga-fourche,.orga-chart > .orga-montee{margin-top:0}
.orga-lien + *,.orga-fourche + *,.orga-montee + *{margin-top:0}
/* Fleche remontant de l'Academie (fabrication) vers le maitre d'oeuvre */
.orga-lien.montant .tige{top:12px;height:34px}
.orga-lien.montant .tige::after{top:auto;bottom:32px;border-top:none;border-bottom:11px solid var(--c)}