/*
Theme Name: Atelier Kemit Architectes
Theme URI: https://atelierkemit.com
Author: Atelier Kemit Architectes
Description: Thème bloc sur mesure, 100 % éditable dans l'éditeur de WordPress.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: aka
Tags: block-theme, full-site-editing, portfolio
*/
@font-face{font-family:"PP Gosha Sans";src:url("assets/fonts/gosha-regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/satoshi-variable.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  --creme:#eaebdb; --noir:#1c1c19; --gris:#56555d; --argent:#c0c0c0;
  --marge:clamp(20px,4.2vw,64px);
  --titre:"PP Gosha Sans","Satoshi",sans-serif;
  --corps:"Satoshi",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--corps);font-size:13px;line-height:1.45;color:var(--noir);background:var(--creme);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--titre);font-weight:400;letter-spacing:-.01em;line-height:1.08;hyphens:none;text-wrap:balance}
h1{font-size:clamp(32px,3.7vw,58px)}
h2{font-size:clamp(34px,3.6vw,56px)}

/* écrans pleine largeur, alternance clair / sombre */
.ecran{padding:0 var(--marge) clamp(56px,7vw,110px);position:relative}
.ecran.clair{background:var(--creme);color:var(--noir)}
.ecran.sombre{background:var(--noir);color:var(--creme)}

/* en-tête : filet fin sous le menu */
.entete{display:flex;justify-content:space-between;align-items:center;padding:22px 0 14px;margin-bottom:clamp(36px,5vw,72px);border-bottom:1px solid currentColor}
.logo{display:block;width:52px;height:17px}
.logo img{object-fit:contain}
.menu{display:flex;gap:clamp(14px,1.8vw,26px);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.01em}
.menu a:hover{opacity:.55}

.texte p{max-width:36ch;font-size:12.5px;line-height:1.45}
.texte p+p{margin-top:1.1em}
.lien{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:12px;margin-top:clamp(28px,5vw,70px)}
.lien::before{content:"↗"}

/* 1 · accueil : titre + texte + grande photo qui déborde */
.accueil{padding-bottom:0}
.accueil .tete{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--marge);align-items:start}
.accueil .tete .texte{justify-self:end;max-width:46ch;padding-top:12px;border-bottom:1px solid currentColor;padding-bottom:12px;margin-bottom:0}
.accueil .tete .texte p{max-width:none}
.accueil .photo-large{margin-top:clamp(36px,5vw,64px);aspect-ratio:2.05/1;position:relative}
.legende{position:absolute;right:28px;bottom:24px;max-width:30ch;text-align:right;color:var(--creme);font-size:10.5px;line-height:1.3}
.legende-titre{display:block;font-family:var(--titre);font-weight:400;font-size:17px;margin-bottom:6px}
.legende-titre::after{content:"";display:inline-block;width:7px;height:7px;background:var(--creme);border-radius:50%;margin-left:8px}
.legende{text-shadow:0 0 18px rgba(0,0,0,.5)}
.accueil{padding-bottom:var(--marge)}

/* 2 · notre histoire : collage de trois photos superposées */
.histoire .grille{display:grid;grid-template-columns:1fr 1fr;gap:var(--marge);align-items:start}
.histoire h2{margin-bottom:clamp(20px,2.5vw,36px)}
.collage{position:relative;height:clamp(420px,46vw,680px)}
.collage figure{position:absolute;overflow:hidden}
.collage .a{left:6%;top:0;width:55%;height:60%;z-index:1}
.collage .b{right:0;top:11%;width:38%;height:60%;z-index:2}
.collage .c{left:24%;bottom:0;width:50%;height:46%;z-index:3}
.collage .b img{filter:grayscale(1)}

/* 3 · portfolio : centré, trois photos */
.portfolio{text-align:center}
.portfolio .intro{max-width:46ch;margin:0 auto clamp(40px,6vw,96px)}
.portfolio .intro h2{margin-bottom:clamp(14px,1.8vw,24px)}
.portfolio .intro p{font-size:11px;line-height:1.4}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,.9vw,14px)}
.trio figure{aspect-ratio:1.26/1;overflow:hidden;position:relative;text-align:left}
.trio figcaption{position:absolute;left:12px;bottom:10px;color:var(--creme);font-size:11px;text-shadow:0 0 14px rgba(0,0,0,.6)}
.portfolio .lien{margin-top:clamp(28px,4vw,56px)}

/* 4 · expertise : texte à gauche, portraits décalés à droite */
.expertise .grille{display:grid;grid-template-columns:1fr 1fr;gap:var(--marge)}
.expertise h2{margin-bottom:clamp(20px,2.5vw,36px)}
.expertise .texte p{color:var(--creme)}
.equipe{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);align-items:start}
.equipe figure:nth-child(even){margin-top:clamp(60px,8vw,130px)}
.equipe .cadre{aspect-ratio:3/4;overflow:hidden;background:var(--gris)}
.equipe img{filter:grayscale(1)}
.equipe figcaption{margin-top:10px;font-size:15px;line-height:1.25}
.equipe figcaption span{display:block;color:var(--argent);font-size:13.5px}
.equipe .chef{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}

/* 5 · contact */
.contact .grille{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--marge);align-items:end}
.contact h2{font-size:clamp(38px,4.6vw,72px)}
.coord{font-size:13px;line-height:1.6;border-top:1px solid currentColor;padding-top:14px}
.coord a{font-weight:600}
.pied{display:flex;justify-content:space-between;gap:20px;padding:20px var(--marge);background:var(--noir);color:var(--argent);font-size:11px}

/* mobile */
@media (max-width:760px){
  .menu{gap:10px;font-size:9.5px}
  .accueil .tete,.histoire .grille,.expertise .grille,.contact .grille{grid-template-columns:1fr}
  .accueil .tete .texte{justify-self:start}
  .accueil .photo-large{aspect-ratio:1.2/1}
  .legende{right:14px;bottom:14px}
  .trio{grid-template-columns:1fr}
  .collage{height:110vw}
  .pied{flex-direction:column}
}

/* portfolio façon Hardel Le Bihan : filtres soulignés + grille de 4 colonnes, titres centrés en capitales */
.portfolio .intro{margin-bottom:clamp(28px,3vw,44px)}
.filtres{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:clamp(28px,3.5vw,52px)}
.filtre{background:none;border:0;border-bottom:1px solid var(--gris);color:var(--argent);font:600 12px var(--corps);padding:0 0 2px;cursor:pointer}
.filtre.actif,.filtre:hover{color:var(--creme);border-color:var(--creme)}
.grille-projets{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,40px) clamp(10px,1.3vw,20px)}
.projet{display:block;text-align:center}
.projet figure{aspect-ratio:1.5/1;overflow:hidden}
.projet img{transition:transform .5s}
.projet:hover img{transform:scale(1.03)}
.projet h3{font-family:var(--corps);font-size:12px;font-weight:500;line-height:1.2;text-transform:uppercase;margin-top:12px;text-wrap:balance}
.projet.cache{display:none}

/* news */
.news{padding-top:clamp(56px,7vw,110px)}
.tete-section{display:flex;justify-content:space-between;align-items:end;margin-bottom:clamp(24px,3vw,44px);padding-bottom:12px;border-bottom:1px solid currentColor}
.tete-section .lien{margin-top:0}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.carte figure{aspect-ratio:1.4/1;overflow:hidden}
.carte .meta{display:block;margin-top:14px;font-size:11px;text-transform:uppercase;color:var(--gris)}
.carte h3{font-family:var(--titre);font-size:clamp(19px,1.7vw,25px);margin-top:6px;line-height:1.15}

/* contact façon Hardel Le Bihan : bloc image à gauche, coordonnées à droite */
.contact{padding-top:clamp(56px,7vw,110px)}
.contact-grille{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--marge);align-items:start}
.contact-photo{aspect-ratio:1/1;overflow:hidden;background:#d9dac9}
.contact-texte{display:grid;grid-template-columns:1fr 1fr;gap:20px var(--marge);font-size:13px;line-height:1.5}
.contact-texte h2{grid-column:1/-1;margin-bottom:10px}
.contact-texte .etiquette{color:var(--gris)}
.contact-texte a{font-weight:600}

@media (max-width:1000px){.grille-projets{grid-template-columns:repeat(2,1fr)}.cartes{grid-template-columns:1fr}}
@media (max-width:760px){.contact-grille,.contact-texte{grid-template-columns:1fr}.tete-section{flex-direction:column;align-items:start;gap:10px}}

/* ============ adaptations WordPress ============ */
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}
.wp-block-image img{width:100%;height:100%;object-fit:cover}
.wp-site-blocks>*+*{margin-block-start:0}
body{position:relative}
main.wp-block-group{margin:0}
.wp-block-post-content>*{margin-block:0}
p,h1,h2,h3{margin-block:0}
h1 br,h2 br{display:inline}

/* en-tête : superposé à la première section, couleur selon son fond */
.entete{display:block;margin:0;border:0;position:absolute;inset:0 0 auto 0;z-index:30;padding:22px var(--marge) 0;color:var(--noir)}
body:has(.wp-block-post-content>.sombre:first-child) .entete{color:var(--creme)}
.entete-rangee{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid currentColor}
.entete .logo{width:52px;height:17px;margin:0}
.entete .logo a{display:block;width:100%;height:100%;font-size:0;background:currentColor;
  -webkit-mask:url("assets/img/aka.svg") center/contain no-repeat;mask:url("assets/img/aka.svg") center/contain no-repeat}
.entete .menu{font-size:11px;font-weight:500;text-transform:uppercase;gap:clamp(14px,1.8vw,26px)}
.entete .menu .wp-block-navigation-item__content{padding:0;color:inherit}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{background-color:var(--noir)!important;color:var(--creme)!important}
.ecran.premier{padding-top:calc(54px + clamp(36px,5vw,72px))}
.ecran.accueil.premier{padding-bottom:var(--marge)}

/* sections */
.ecran>.tete,.ecran>.grille{margin:0}
.accueil .texte{justify-self:end}
.photo-large .wp-block-image{position:absolute;inset:0}
.photo-large{overflow:hidden}
.legende{position:absolute;right:28px;bottom:24px;z-index:2}
.legende-titre{font-family:var(--titre);font-size:17px;margin-bottom:6px}
.legende p{font-size:10.5px;line-height:1.3}
.lien a{display:inline-flex;gap:8px;align-items:center}
.lien a::before{content:"↗"}
.lien::before{content:none!important}
.texte .lien{margin-top:clamp(28px,5vw,70px)}
.tete-section .lien{margin-top:0}

/* collage */
.collage .wp-block-image{position:absolute;overflow:hidden}
.collage .a{left:6%;top:0;width:55%;height:60%;z-index:1}
.collage .b{right:0;top:11%;width:38%;height:60%;z-index:2}
.collage .c{left:24%;bottom:0;width:50%;height:46%;z-index:3}
.collage .b img{filter:grayscale(1);object-position:50% 25%}

/* portfolio */
.filtre{cursor:pointer}
.projet figure.wp-block-image{aspect-ratio:1.5/1;overflow:hidden}
.projet h3 a{color:inherit}
.projet.cache{display:none}
.grille-projets{display:grid}

/* équipe */
.equipe .membre:nth-child(even){margin-top:clamp(60px,8vw,130px)}
.equipe .cadre{aspect-ratio:3/4;overflow:hidden;background:var(--gris)}
.equipe .cadre img{filter:grayscale(1)}
.equipe .membre:first-child .cadre img{object-position:50% 20%}
.membre-nom{margin-top:10px;font-size:15px;line-height:1.25}
.membre-role{color:var(--argent);font-size:13.5px;line-height:1.25}

/* news (boucle d'articles) */
ul.wp-block-post-template.cartes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.cartes>li{margin:0}
.cartes .wp-block-post-featured-image{aspect-ratio:1.4/1;overflow:hidden;margin:0}
.cartes .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.cartes .meta{display:block;margin-top:14px;font-size:11px;text-transform:uppercase;color:var(--gris)}
.cartes .wp-block-post-title{font-family:var(--titre);font-weight:400;font-size:clamp(19px,1.7vw,25px);margin-top:6px;line-height:1.15}
.cartes .wp-block-post-title a{color:inherit}

/* contact */
.contact-photo{aspect-ratio:1/1;overflow:hidden;background:#d9dac9}
.contact-texte p a{font-weight:600}

/* pied de page */
.pied{background:var(--noir);color:var(--argent);padding:20px var(--marge)}
.pied-rangee{display:flex;justify-content:space-between;gap:20px;font-size:11px}
.pied a{color:inherit}

/* article seul */
.article{padding:clamp(90px,9vw,130px) var(--marge) clamp(56px,7vw,110px);max-width:none}
.article .wp-block-post-title{margin:20px 0 10px}
.article .wp-block-post-featured-image{aspect-ratio:2/1;overflow:hidden}
.article .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.article .wp-block-post-content{max-width:62ch;margin-top:30px;font-size:15px}
.article .wp-block-post-content p+p{margin-top:1em}

:where(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (max-width:1000px){ul.wp-block-post-template.cartes{grid-template-columns:1fr}}
@media (max-width:760px){.legende{right:14px;bottom:14px}.pied-rangee{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}