/* Reylec — Packager éditorial · démonstration
   Palette et polices RELEVÉES dans son propre gabarit (css/style.css du site d'origine) :
   #4DD0E1 cyan · #e7eff2 gris-bleu des sections · #0f1215 pied de page · #000 texte · #fff fond
   Polices : Roboto Condensed (titres, capitales, interlettrage) + Open Sans (texte), les siennes.
   Améliorations du seul périmètre esthétique : taille de texte (son site est en 100 % par défaut,
   trop petit), respirations, alternance de fond, images en WebP. Aucun mot, aucun titre changé.
------------------------------------------------------------------------------------------------*/
@font-face{font-family:'Roboto Condensed';src:url(fonts/robotocondensed.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';src:url(fonts/opensans.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Socle
---------------------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#1b1f22;font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#0a6a75;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#07525b}
h1,h2,h3,h4{font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;margin:0;line-height:1.15}
p{margin:0 0 1.15em}
.wrap{width:min(1140px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:84px}
:focus-visible{outline:3px solid #0b7c8a;outline-offset:2px}

/* La une — cinq visuels qui se succèdent, en CSS pur (le site d'origine le fait en jQuery)
---------------------------------------------------------------------------*/
.une{position:relative;height:clamp(320px,70vw,900px);overflow:hidden;background:#26343b}
.une-i{position:absolute;inset:0;opacity:0;animation:defile 30s infinite}
.une-i img{width:100%;height:100%;object-fit:cover}
.une-i::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 42% at 50% 55%,rgba(10,14,17,.42),rgba(10,14,17,0) 78%)}
.une-i:nth-child(1){animation-delay:0s}
.une-i:nth-child(2){animation-delay:6s}
.une-i:nth-child(3){animation-delay:12s}
.une-i:nth-child(4){animation-delay:18s}
.une-i:nth-child(5){animation-delay:24s}
.une-t{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 20px}
.une-t p{position:absolute;margin:0;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;opacity:0;color:#fff;font-size:clamp(24px,5.6vw,72px);font-weight:800;text-transform:uppercase;letter-spacing:clamp(5px,1.1vw,14px);text-shadow:3px 3px 11px rgba(20,20,20,1);animation:defile 30s infinite}
.une-t p:nth-child(1){animation-delay:0s}
.une-t p:nth-child(2){animation-delay:6s}
.une-t p:nth-child(3){animation-delay:12s}
.une-t p:nth-child(4){animation-delay:18s}
.une-t p:nth-child(5){animation-delay:24s}
.une-p{position:absolute;left:0;right:0;bottom:5%;display:flex;justify-content:center;gap:9px;z-index:5}
.une-p i{width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.35);animation:pastille 30s infinite}
.une-p i:nth-child(2){animation-delay:6s}
.une-p i:nth-child(3){animation-delay:12s}
.une-p i:nth-child(4){animation-delay:18s}
.une-p i:nth-child(5){animation-delay:24s}
@keyframes pastille{0%,21%,100%{background:rgba(255,255,255,.35)}2%,18%{background:#fff}}
@keyframes defile{0%{opacity:0}2%{opacity:1}18%{opacity:1}21%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.une-i,.une-t p{animation:none}.une-i:nth-child(1),.une-t p:nth-child(1){opacity:1}}

/* En-tête — logo et navigation, posés sur la une comme chez lui
---------------------------------------------------------------------------*/
header{position:relative}
.tete{position:absolute;top:0;left:0;width:100%;z-index:30;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78) 62%,rgba(255,255,255,0))}
.tete-in{display:flex;align-items:center;justify-content:center;padding:26px 0 22px}
.tete-in img{width:min(300px,62vw);height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.nav{background:transparent}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.nav a{display:block;padding:.8em 1.05em;color:#111;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border-right:1px solid rgba(0,0,0,.14)}
.nav li:first-child a{border-left:1px solid rgba(0,0,0,.14)}
.nav a:hover,.nav a[aria-current]{color:#0b7c8a;background:rgba(77,208,225,.16)}

/* Rythme des sections — l'alternance de fond est ce qui casse le mur de texte
---------------------------------------------------------------------------*/
.sec{position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) 0}
.sec .wrap{position:relative;z-index:2}
/* la capitale en filigrane de son gabarit — 26em, gris a 23 %, purement decorative */
.filigrane{position:absolute;top:0;width:clamp(9em,26vw,26em);aspect-ratio:1/1.06;background-repeat:no-repeat;background-position:top center;background-size:contain;pointer-events:none;z-index:1}
.fg-g{left:0}
.fg-d{right:0}
.gris{background:#e7eff2}
.noir{background:#0f1215;color:#dfe5e9}
.sec h1,.sec h2,.sec h3.titre{font-size:clamp(24px,3.8vw,48px);font-weight:800;text-transform:uppercase;letter-spacing:5px;text-align:center;color:#000;margin:0 0 .7em}
.noir h3.titre{color:#fff}
.accroche{text-align:center;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;font-size:clamp(17px,2vw,22px);font-weight:400;letter-spacing:.5px;color:#31424a;margin:0 0 2em}
.texte{max-width:88ch}
.texte p:last-child{margin-bottom:0}

/* Le bandeau de quatre images de l'accueil
---------------------------------------------------------------------------*/
.quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:1.5em}
.quatre img{width:100%;aspect-ratio:640/311;object-fit:cover}
@media (max-width:720px){.quatre{grid-template-columns:repeat(2,1fr)}}

/* Portfolio — six vignettes carrées, et la loupe s'ouvre SANS une ligne de JavaScript
---------------------------------------------------------------------------*/
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.folio{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.folio{grid-template-columns:1fr}}
.folio figure{margin:0}
.folio a{position:relative;display:block;overflow:hidden;background:#000}
.folio img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:opacity .35s,transform .35s}
.folio a:hover img,.folio a:focus-visible img{opacity:.6;transform:scale(1.04)}
.loupe{position:fixed;inset:0;z-index:300;background:rgba(8,10,12,.93);display:none;place-items:center;padding:24px}
.loupe:target{display:grid}
.loupe img{max-width:min(1100px,92vw);max-height:78vh;width:auto;object-fit:contain}
.loupe p{color:#e7eff2;text-align:center;max-width:70ch;margin:1em auto 0;font-size:15px}
.loupe .fermer{position:absolute;top:18px;right:22px;color:#fff;font-size:30px;line-height:1;text-decoration:none}

/* L'équipe — les portraits ronds de son gabarit
---------------------------------------------------------------------------*/
.equipe{max-width:80ch;margin-inline:auto}
.equipe .pers{display:flex;gap:20px;align-items:flex-start;margin:0 0 1.9em}
.equipe .pers img{flex:0 0 auto;width:104px;height:104px;border-radius:50%;object-fit:cover}
.equipe .pers b{display:block;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;font-size:20px;letter-spacing:.5px;margin-bottom:.35em}
@media (max-width:560px){.equipe .pers{flex-direction:column;gap:12px}}

/* Contact
---------------------------------------------------------------------------*/
.coord{display:grid;gap:26px;max-width:560px}
.coord p{display:flex;align-items:center;gap:18px;margin:0}
.coord .ic{flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;border:1px solid #000;color:#000;transition:.4s all}
.coord p:hover .ic{border-color:#4dd0e1;background:#4dd0e1;color:#fff}
.coord b{display:block;font-family:'Open Sans',Arial,sans-serif;font-size:16px;font-weight:800;color:#000;margin-bottom:.2em}
.coord a{font-size:19px}

/* Pied de page
---------------------------------------------------------------------------*/
.pied{background:#0f1215;color:#9aa3aa;padding:2.2em 0;text-align:center;font-size:15px}
.pied a{color:#7fd8e3}
.pied p{margin:0;line-height:1.9}

/* Page intérieure — en-tête sans diaporama, fil d'Ariane, texte légal
---------------------------------------------------------------------------*/
.tete-page{background:#0f1215}
.tete-page .tete-in{padding:18px 0}
.fil{font-size:14.5px;color:#5d6b73;margin-bottom:1em;text-align:center}
.fil a{color:#0a6a75}
.legal h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:1px;margin:.2em 0 .6em}
.legal p{font-size:16.5px}

.fl-o{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20106%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2292%22%20font-family%3D%22Open%20Sans%2CArial%2CHelvetica%2Csans-serif%22%20font-size%3D%22118%22%20font-weight%3D%22700%22%20fill%3D%22%23999999%22%20fill-opacity%3D%220.23%22%20text-anchor%3D%22middle%22%3EO%3C%2Ftext%3E%3C%2Fsvg%3E")}
.fl-p{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20106%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2292%22%20font-family%3D%22Open%20Sans%2CArial%2CHelvetica%2Csans-serif%22%20font-size%3D%22118%22%20font-weight%3D%22700%22%20fill%3D%22%23999999%22%20fill-opacity%3D%220.23%22%20text-anchor%3D%22middle%22%3EP%3C%2Ftext%3E%3C%2Fsvg%3E")}
.fl-e{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20106%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2292%22%20font-family%3D%22Open%20Sans%2CArial%2CHelvetica%2Csans-serif%22%20font-size%3D%22118%22%20font-weight%3D%22700%22%20fill%3D%22%23999999%22%20fill-opacity%3D%220.23%22%20text-anchor%3D%22middle%22%3EE%3C%2Ftext%3E%3C%2Fsvg%3E")}
.fl-c{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20106%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2292%22%20font-family%3D%22Open%20Sans%2CArial%2CHelvetica%2Csans-serif%22%20font-size%3D%22118%22%20font-weight%3D%22700%22%20fill%3D%22%23999999%22%20fill-opacity%3D%220.23%22%20text-anchor%3D%22middle%22%3EC%3C%2Ftext%3E%3C%2Fsvg%3E")}
.fl-r{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20106%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2292%22%20font-family%3D%22Open%20Sans%2CArial%2CHelvetica%2Csans-serif%22%20font-size%3D%22118%22%20font-weight%3D%22700%22%20fill%3D%22%23999999%22%20fill-opacity%3D%220.23%22%20text-anchor%3D%22middle%22%3ER%3C%2Ftext%3E%3C%2Fsvg%3E")}
.tete-page .nav a{color:#e7eff2;border-right-color:rgba(255,255,255,.22)}
.tete-page .nav li:first-child a{border-left-color:rgba(255,255,255,.22)}
.tete-page .nav a:hover,.tete-page .nav a[aria-current]{color:#fff;background:rgba(77,208,225,.22)}
.tete-page .nav li{color:#e7eff2}