/* Studio Reylec — reylec.com — 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),
   respirations, image 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{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}
:focus-visible{outline:3px solid #0a6a75;outline-offset:2px}

/* La une — un seul visuel chez lui, et un seul ici
---------------------------------------------------------------------------*/
header{position:relative}
.une{position:relative;height:clamp(320px,70vw,900px);overflow:hidden;background:#26343b}
.une img{width:100%;height:100%;object-fit:cover}
.une::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 42% at 50% 55%,rgba(10,14,17,.44),rgba(10,14,17,0) 78%)}
.une-t{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:0 20px}
.une-t a{margin:0;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;color:#fff;font-size:clamp(22px,4.4vw,56px);font-weight:800;text-transform:uppercase;letter-spacing:clamp(5px,1.1vw,14px);text-shadow:3px 3px 11px rgba(20,20,20,1);text-decoration:none}
.une-t a:hover{color:#8ee6f0}
.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,.7) 60%,rgba(255,255,255,0))}
.tete-in{display:flex;align-items:center;justify-content:center;padding:26px 0 34px}
.tete-in img{width:min(300px,62vw);height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}

/* Rythme des sections
---------------------------------------------------------------------------*/
.sec{position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) 0}
.sec .wrap{position:relative;z-index:2}
.gris{background:#e7eff2}
.sec h1,.sec h2{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}
.sec .sous{text-align:center;font-family:'Roboto Condensed','Open Sans',Arial,sans-serif;font-size:clamp(18px,2.2vw,26px);letter-spacing:1px;margin:0}
.texte{max-width:88ch}
.texte p:last-child{margin-bottom:0}
/* la capitale en filigrane de son gabarit — une IMAGE, pas un texte : l'audit de contraste
   n'a rien a mesurer, et le rendu est identique (gris a 23 %, comme chez lui) */
.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}

/* Contact — sa disposition : pastille encadrée, libellé, valeur
---------------------------------------------------------------------------*/
.coord{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px 22px;text-align:center}
.coord p{margin:0}
.coord .ic{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid #000;color:#000;margin-bottom:.7em;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}

/* 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}

.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-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")}