/* comelebozec.com — architecture visuelle reprise du site de référence, cotes exactes :
   corps 20/22 px, cellule 2px 4px (rangée de 26 px), en-tête 130 px (5 rangées) sur l'accueil et 52 px ailleurs,
   grille d'accueil en deux colonnes 50/50 (image | titre 96/83 px révélé au survol), flou 30 px au repos,
   lightbox en trois cellules (titre | information | nom), liste en trois colonnes, page à trois colonnes.
   Points de rupture : 970 px et 680 px. Palette : fond #e6e7e8, cellule #fff, cellule grise #dcdcdc, actif #000. */

html{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#000;background:#e6e7e8;-webkit-text-size-adjust:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{background:#e6e7e8;font-size:20px;line-height:22px;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{font-size:20px;line-height:22px;font-weight:400}
a{color:#000;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[id]{scroll-margin-top:52px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #000;outline-offset:-2px}

/* ---- cellules ---- */
.cellule,.espace{display:block;width:100%;padding:2px 4px;min-height:26px}
.blanc{background:#fff}
.gris{background:#dcdcdc}
.lien{display:block;width:100%;padding:2px 4px;transition:background 250ms ease-in-out,color 250ms ease-in-out}
.lien:hover,.lien.actif{color:#fff;background:#000}

/* ==================================================================
   SEUIL — page de garde galaxie (identité conservée)
   ================================================================== */
html.js:not(.libre) body{overflow:hidden}
/* avant l'entrée, le document porte la couleur de la galaxie. D'après les retours d'expérience sur Safari iOS 26
   (1ar.io, nasedk.in, jahir.dev, forums Apple), la teinte des zones hors fenêtre (barre d'état en haut, barre d'adresse
   et indicateur d'accueil en bas) est prise sur la page — élément fixed collé au bord, sinon fond de body (ou de html
   selon les sources) — et theme-color n'y a plus d'effet observé ; les deux fonds sont posés par prudence.
   Le fond revient au clair en 1 200 ms, avec la galaxie. */
html.js:not(.entered),html.js:not(.entered) body{background:#050505}
html.js,html.js body{transition:background-color 1200ms ease}
#galaxie{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;background:#050505}
html.direct #galaxie,html:not(.js) #galaxie{display:none}
#seuil{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;cursor:pointer;text-align:center;padding:0 1.5rem;color:#ECE9E2;background:transparent;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
#seuil .nom-seuil{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.04em;line-height:1.1;text-transform:lowercase}
#seuil .sous{font-size:13px;line-height:24px;letter-spacing:.42em;color:#8f8d86;text-transform:lowercase}
#seuil .entrer{margin-top:2.2rem;font-size:13px;line-height:24px;letter-spacing:.28em;color:#8f8d86;text-transform:lowercase;
  padding:.5em .8em;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.95}}
html.entered #seuil{pointer-events:none;opacity:0;transition:opacity 420ms ease-in-out}
html.direct #seuil,html:not(.js) #seuil,#seuil[hidden]{display:none}
html.entered #galaxie{opacity:0;transition:opacity 1200ms ease}
html.libre #galaxie{display:none} /* filet si three.js n'a pas chargé : un élément fixe à opacité 0 est encore échantillonné */

/* la page n'existe pas avant l'entrée ; elle apparaît en fondu, à 300 ms, en 600 ms */
#page{display:none;position:relative;z-index:1}
html.entered #page,html:not(.js) #page{display:block}
@keyframes apparait{from{opacity:0}to{opacity:1}}
html.entered:not(.direct) #page{animation:apparait 600ms ease-in-out 300ms both}

/* ==================================================================
   EN-TÊTE — 130 px (5 rangées de 26 px) sur l'accueil, 52 px (2 rangées) sur les autres pages
   ================================================================== */
.entete{position:relative;z-index:2000;height:130px}
.page-normale .entete{height:52px}
.entete-inner{position:fixed;top:0;left:0;right:0;z-index:2000;height:130px;overflow:hidden;transition:top .5s ease-in-out;will-change:top}
.page-normale .entete-inner{height:52px}
.home .entete.ferme .entete-inner{top:-80px}
.rangee{display:grid;grid-template-columns:1fr 1fr}
.rangee3{display:grid;grid-template-columns:1fr 1fr 1fr}
.rangee > *,.rangee3 > *{min-width:0;overflow-x:hidden}
.identite{display:none}
.home .identite{display:block}
/* sur la liste, les cellules grises de l'en-tête passent au blanc ; sur la page À propos, à #cfcfcf */
.page-liste .entete .gris{background:#fff}
.page-apropos .entete .gris{background:#cfcfcf}
.entete .lien.actif,.page-liste .entete .lien.actif,.page-apropos .entete .lien.actif{color:#fff;background:#000}

/* ==================================================================
   GRILLE D'ACCUEIL — une ligne = image (50 %) + titre (50 %), en quinconce
   ================================================================== */
.grille{position:relative}
.ligne{display:grid;grid-template-columns:1fr 1fr;cursor:pointer}
.ligne.droite .cellule-img{order:2}
.ligne.droite .cellule-titre{order:1}
.cellule-img{position:relative;min-width:0;overflow:hidden}
.cellule-img figure{position:relative}
.img-cadre{position:relative;width:100%;overflow:hidden;aspect-ratio:var(--ar,16/9);background:#e6e7e8}
.img-cadre img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 500ms ease-in-out}
.img-cadre img.ok{opacity:1}
/* dessins sans fond : le blanc de l'image prend la couleur du fond, seuls les traits restent (photos exclues).
   La fusion se fait avec le fond du conteneur le plus proche : .img-cadre et .vue portent donc le gris du site,
   car .diapo (z-index) et #page (z-index) isolent leurs descendants de l'arrière-plan de la page. */
img.dessin{mix-blend-mode:multiply}
.indicateur{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid #000;border-radius:50%;
  border-right-color:transparent;animation:tourne 1s linear infinite;opacity:.4}
.img-cadre img.ok ~ .indicateur,.img-cadre img.ok + .indicateur{display:none}
@keyframes tourne{to{transform:rotate(360deg)}}
figcaption{position:relative;z-index:1;background:#fff}
.legende{padding:2px 4px}
.cellule-titre{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 4px;text-align:center}
.titre-grand{width:100%;opacity:0;transition:opacity 250ms ease-in-out;will-change:opacity}
.titre-grand h1{font-size:96px;line-height:83px}
.titre-petit{position:absolute;top:50%;left:0;z-index:1;display:none;width:100%;padding:0 4px;text-align:center;transform:translateY(-50%)}
.titre-petit h1{font-size:42px;line-height:32px}

/* le flou est strictement un effet de pointeur fin : au repos l'image est floue à 30 px et agrandie à 110 % ;
   au survol de la LIGNE entière (image et colonne vide), elle se pose et le titre se matérialise dans la colonne vide */
@media (hover:hover) and (pointer:fine){
  html:not(.tactile) .grille .img-cadre img{top:-5%;left:-5%;width:110%;height:110%;filter:blur(30px);
    transition:filter 250ms ease-in-out,opacity 500ms ease-in-out;transform:translateZ(0);will-change:filter;backface-visibility:hidden}
  html:not(.tactile) .ligne:hover .img-cadre img{top:0;left:0;width:100%;height:100%;filter:blur(0)}
  html:not(.tactile) .ligne:hover .titre-grand,html:not(.tactile) .ligne:focus-within .titre-grand{opacity:1}
  html:not(.tactile) .ligne:focus-within .img-cadre img{top:0;left:0;width:100%;height:100%;filter:blur(0)}
}
.ligne:focus-visible{outline:2px solid #000;outline-offset:-2px}
/* projet en cours : la cellule reste floue, au survol comme au toucher, et ne s'ouvre pas */
.ligne.en-cours{cursor:default}
.grille .ligne.en-cours .img-cadre img,html:not(.tactile) .ligne.en-cours:hover .img-cadre img{top:-5%;left:-5%;width:110%;height:110%;filter:blur(30px)}
.liste-titre.en-cours{cursor:default}
.liste-titre.en-cours:hover{color:#000;background:#dcdcdc}

/* ==================================================================
   LIGHTBOX — plan superposé : barre de cellules (titre | information | nom = sortie), diaporama, panneau d'information
   ================================================================== */
.lightbox{--barre:52px;position:fixed;top:0;left:0;z-index:10000;display:none;width:100%;height:100%;overflow:clip;background:#e6e7e8;
  opacity:0;transition:opacity 350ms ease-in-out;will-change:opacity}
.lightbox.active{display:block}
.lightbox.visible{opacity:1}
html.lightbox-ouverte{overflow:hidden}
html.lightbox-ouverte body{overflow:hidden}
.lightbox-inner{position:relative;width:100%;height:100%}
.lb-barre{position:absolute;top:0;left:0;right:0;z-index:35;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:26px auto;min-height:52px;pointer-events:none}
.lb-titre{grid-column:1;grid-row:1;background:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 4px;pointer-events:auto}
.lb-legende{grid-column:1;grid-row:2;padding:2px 4px;white-space:normal;pointer-events:none}
.lb-legende:empty{display:none}
.lb-espace{display:none;pointer-events:none}
.lb-info{grid-column:2;grid-row:2;align-self:start;background:#dcdcdc;pointer-events:auto}
.lb-fermer{grid-column:3;grid-row:1;background:#fff;pointer-events:auto}
.lb-info button,.lb-fermer button{display:block;width:100%;padding:2px 4px;text-align:left;transition:background 250ms ease-in-out,color 250ms ease-in-out}
.lb-fermer button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-info button:hover,.lb-fermer button:hover{color:#fff;background:#000}
.lb-info.cache{display:none}

.diapo{position:absolute;top:var(--barre);left:0;right:0;z-index:1;height:calc(100% - var(--barre));display:flex;overflow:hidden;scroll-behavior:auto;overscroll-behavior-x:none;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.diapo::-webkit-scrollbar{display:none}
.vue{flex:0 0 100%;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:#e6e7e8}
.vue img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.vue-composee{container-type:size}
.vue-analyse{flex-direction:column;gap:22px}
.echelle-couleurs{flex:none;width:320px;max-width:calc(100% - 40px);font-size:12px;line-height:16px;color:#4b4b4b}
.echelle-titre{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}
.echelle-titre span{white-space:nowrap}
.echelle-degrade{height:10px}
.echelle-graduations{position:relative;height:16px;margin-top:5px;font-variant-numeric:tabular-nums}
.echelle-graduations span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.echelle-graduations span:first-child{transform:none}
.echelle-graduations span:last-child{transform:translateX(-100%)}
.planche-composee{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;height:100%}
.vue-analyse .planche-composee{height:auto;flex:none}
.planche-composee figure{margin:0;flex:none;text-align:center}
.planche-composee img{width:100%;height:auto}
.planche-composee figcaption{margin-top:12px;font-size:12px;line-height:16px;color:#555;background:transparent}
.planche-composee.solaire figure{width:min(calc((100cqw - 32px)/3),calc(100cqh / 3 * 1.898305))}
.planche-composee.vent{gap:32px}
.planche-composee.vent figure{width:min(calc((100cqw - 48px)/3),calc(100cqh * 4 / 9))}
@media(max-width:680px){
  .planche-composee.solaire{flex-direction:column;gap:16px}
  .planche-composee.solaire figure{width:min(calc(100cqw / 3),calc((100cqh - 116px) / 3 * 1.898305))}
  .planche-composee.vent{flex-direction:column;gap:24px}
  .planche-composee.vent figure{width:min(calc(100cqw * 4 / 9),calc((100cqh - 80px)/3))}
  .planche-composee figcaption{margin-top:8px}
}
.prec,.suiv{position:absolute;top:var(--barre);z-index:10;width:50%;height:calc(100% - var(--barre));background:transparent}
.lightbox.info-ouverte .prec,.lightbox.info-ouverte .suiv{height:calc(30% - 26px)}
.prec{left:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2232%22%20viewBox%3D%220%200%2044%2032%22%3E%3Cpath%20d%3D%22M40%2016%20H4%20M14.9%203.0%20L4%2016%20L14.9%2029.0%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 22 16, pointer}
.suiv{right:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2232%22%20viewBox%3D%220%200%2044%2032%22%3E%3Cpath%20d%3D%22M4%2016%20H40%20M29.1%203.0%20L40%2016%20L29.1%2029.0%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 22 16, pointer}
@media (hover:none){
  .diapo{overflow-x:auto}
  .prec,.suiv{display:none}
}
html.tactile .diapo{overflow-x:auto}
html.tactile .prec,html.tactile .suiv{display:none}

/* Une planche interactive conserve des flèches accessibles hors du modèle. */
.animation-charpente{width:calc(100% - 96px);height:100%;border:0;background:#e6e7e8}
.lightbox.animation-active .prec,.lightbox.animation-active .suiv{display:block;width:44px;height:44px;top:auto;bottom:12px;cursor:pointer}
.lightbox.animation-active .prec::after{content:'←'}
.lightbox.animation-active .suiv::after{content:'→'}
.lightbox.animation-active .prec::after,.lightbox.animation-active .suiv::after{font-size:24px}
.lightbox.animation-active.info-ouverte .prec,.lightbox.animation-active.info-ouverte .suiv{display:none}

.lb-panneau{position:absolute;right:0;bottom:0;left:0;z-index:30;display:block;width:100%;max-height:70vh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#e6e7e8;
  visibility:hidden;transform:translateY(100%);transition:transform 350ms ease-in-out,visibility 0s 350ms}
.lightbox.info-ouverte .lb-panneau{visibility:visible;transform:none;transition:transform 350ms ease-in-out,visibility 0s 0s}
.lb-panneau-fermer-mobile{display:none}
.lb-panneau-inner{min-height:0;padding:0 0 24px}
.lb-panneau-tete{position:sticky;top:0;z-index:2;flex-shrink:0;display:grid;grid-template-columns:1fr 2fr;width:100%}
.lb-panneau-tete > *{padding:2px 4px;line-height:22px}
.lb-panneau-libelle{background:#dcdcdc}
.lb-panneau-actions{text-align:right;background:#dcdcdc;cursor:pointer;transition:background 250ms ease-in-out,color 250ms ease-in-out}
.lb-panneau-actions:hover{color:#fff;background:#000}
.lb-panneau-corps{display:flex;flex-direction:row;min-height:0}
.lb-meta{width:33.3333%;flex-shrink:0;align-self:flex-start}
.lb-meta dt,.lb-meta dd{display:block;padding:2px 4px;line-height:22px}
.lb-meta dt{background:#fff}
.lb-carte dd{padding:8px 4px}
.lb-carte img{display:block;width:100%;max-width:360px;height:auto;background:#fff;opacity:1}
.lb-carte-parcelles{display:block;margin-top:4px}
.lb-carte small{display:block;font-size:10px;line-height:15px;color:#666}
.lb-carte small a{text-decoration:underline}
.lb-contenu{flex:1 1 0;width:66.6667%;min-width:0;min-height:0;background:#e6e7e8}
.lb-description{padding:2px 4px;line-height:22px}
.lb-description p{margin:0 0 12px}
.lb-description p:last-child{margin-bottom:0}
.lb-photographie{padding:2px 4px;line-height:22px;opacity:.7}

/* ==================================================================
   LISTE DES PROJETS — trois colonnes de 33,33 %, titres en cellules grises, dépliants
   ================================================================== */
.liste{position:relative}
.liste-rangee{display:grid;grid-template-columns:1fr 1fr 1fr}
.liste-rangee > *{min-width:0;overflow:hidden}
.liste-titre{display:block;width:100%;padding:2px 4px;text-align:left;background:#dcdcdc;cursor:pointer;user-select:none;
  transition:background 250ms ease-in-out,color 250ms ease-in-out}
.liste-titre:hover,.liste-titre[aria-expanded="true"]{color:#fff;background:#000}
.depliant{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms ease-in-out}
.depliant[hidden]{display:grid}
.depliant.ouvert{grid-template-rows:1fr}
.depliant > div{overflow:hidden;min-height:0}
.depliant .img-cadre{cursor:pointer}
.depliant-desc{padding:2px 4px}
.depliant-desc p + p{margin-top:22px}

/* ==================================================================
   PAGE (À propos) — table de trois colonnes : titres en cellules blanches en quinconce, contenus dessous
   ================================================================== */
.page-rangee{display:grid;grid-template-columns:1fr 1fr 1fr}
.page-rangee > *{min-width:0}
.page-titre,.page-contenu,.page-espace{display:block;width:100%;padding:2px 4px}
.page-titre-petit{display:none;padding:2px 4px}
.page-titre-petit-espace{display:none;width:100%;height:26px;background:#e6e7e8}
.page-contenu p + p,.page-contenu img + p{margin-top:22px}
.page-contenu img{width:100%;margin-top:-22px}
.page-contenu.avec-img{padding-bottom:0}
.page-contenu h2{margin-top:22px}

/* ==================================================================
   POINTS DE RUPTURE — 970 px puis 680 px, comme la référence
   ================================================================== */
@media (max-width:970px){
  .titre-grand h1{font-size:56px;line-height:44px}
  .page-normale .entete,.page-normale .entete-inner{height:156px}
  .rangee3{grid-template-columns:1fr}
  .liste-rangee{grid-template-columns:1fr}
  .liste-rangee .liste-espace{display:none}
  .page-rangee{grid-template-columns:1fr}
  .page-rangee .page-espace,.page-rangee .titre-cache-petit{display:none}
  .page-titre-petit,.page-titre-petit-espace{display:block}
  .page{position:relative;top:-26px}
  /* lightbox : titre sur toute la largeur, information | espace | nom sur la deuxième rangée */
  .lb-barre{grid-template-rows:26px 26px auto}
  .lb-titre{grid-column:1/4;grid-row:1}
  .lb-info{grid-column:1;grid-row:2}
  .lb-espace{display:block;grid-column:2;grid-row:2;background:#dcdcdc}
  .lb-fermer{grid-column:3;grid-row:2;background:#dcdcdc}
  .lb-fermer button{text-align:right}
  .lb-legende{grid-column:1/4;grid-row:3;background:#fff;white-space:normal}
  .lb-legende:empty{display:none}
  .lb-panneau{max-height:calc(100% - 78px)}
  .lb-panneau-inner{max-height:none;padding-top:0}
  .lb-panneau-fermer-mobile{display:block;position:sticky;top:0;z-index:1;padding:2px 4px;line-height:22px;text-align:right;color:#fff;background:#000;cursor:pointer;width:100%}
  .lb-panneau-tete{grid-template-columns:1fr}
  .lb-panneau-tete{position:static}
  .lb-panneau-actions{display:none}
  .lb-panneau-corps{flex-direction:column}
  .lb-meta{width:100%;order:1}
  .lb-contenu{width:100%;order:2;overflow:visible}
  .lb-description{padding-top:24px}
  .lb-panneau{overflow-y:auto}
}
@media (max-width:680px){
  .titre-grand h1{font-size:42px;line-height:32px}
  .home .entete,.home .entete-inner{height:260px}
  .home .entete.ferme .entete-inner{top:-160px}
  .rangee{grid-template-columns:1fr}
  .rangee .cache-petit{display:none}
  .rangee .visible-petit{display:block}
  .ligne{grid-template-columns:1fr}
  .cellule-titre{display:none}
  .titre-petit{display:block}
}
@media (min-width:681px){
  .rangee .visible-petit{display:none}
}

/* ---- mouvement réduit : les fondus restent, le flou disparaît au repos ---- */
@media (prefers-reduced-motion:reduce){
  html.js,html.js body,.entete-inner,.lb-panneau,.depliant{transition:none}
  html:not(.tactile) .grille .img-cadre img{filter:none;top:0;left:0;width:100%;height:100%}
  #seuil .entrer{animation:none;opacity:.8}
}
@media (forced-colors:active){
  .lien:hover,.lien.actif,.liste-titre:hover{forced-color-adjust:none}
}