/*
Theme Name: Karen Brenner Avocat
Author: Me Karen BRENNER
Description: Thème bloc sur mesure pour le site de Maître Karen BRENNER, avocat au Barreau de Paris.
Version: 1.0.7
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karen-brenner
Tags: block-theme, full-site-editing, business, one-column
*/

@font-face{font-family:"Noto Serif";src:url(assets/fonts/noto-serif.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(assets/fonts/bodoni.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Montserrat;src:url(assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --ardoise:#2F373E;
  --nuit:#21252A;
  --cuivre:#956B3C;
  --clair:#F9F9F9;
  --blanc:#FFFFFF;
  --encre:#2E3137;
  --gris:#73787D;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 16px/28px "Noto Serif",Georgia,serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{font-weight:700;hyphens:none;text-wrap:balance}

/* Gutenberg : espacement coupé dans theme.json, filet ici à spécificité nulle. */
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}

.cadre{width:min(1200px,100% - 48px);margin-inline:auto}
.surtitre{margin-bottom:12px;color:var(--cuivre);font-size:13px;line-height:20px;text-transform:uppercase;letter-spacing:.3px}
h2{font-size:38px;line-height:50px}
.gris{color:var(--gris)}

/* Boutons : la classe du bloc est sur le conteneur, le style sur le lien. */
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 26px;border-radius:999px;font:700 14px/22px "Noto Serif",Georgia,serif}
.wp-block-button.b-cuivre .wp-block-button__link{background:var(--cuivre);color:var(--blanc)}
.wp-block-button.b-blanche .wp-block-button__link{background:var(--blanc);color:var(--encre)}
.wp-block-button.b-contour .wp-block-button__link{border:1px solid var(--blanc);background:none;color:var(--blanc)}
.wp-block-button.b-fleche .wp-block-button__link::after{content:"→";display:grid;place-items:center;width:24px;height:24px;margin-right:-14px;border-radius:50%;background:var(--blanc);color:var(--cuivre);line-height:1}

/* en-tête */
.entete{position:relative;z-index:3;background:var(--ardoise);color:var(--blanc)}
.entete-in{display:flex;align-items:center;gap:24px;width:min(1680px,100% - 64px);min-height:112px;margin-inline:auto}
.logo{display:inline-flex;align-items:center;gap:12px;flex:none}
.logo .wp-block-site-logo img{width:auto;height:26px}
.logo .wp-block-site-logo a{display:block}
.logo-nom{font:400 26px/1 "Bodoni Moda","Cormorant Garamond",Georgia,serif;white-space:nowrap}
.wp-block-navigation.menu-haut{margin-left:auto;font:500 12px/20px Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.menu-haut .wp-block-navigation__container{gap:2px}
.menu-haut .wp-block-navigation-item__content{display:block;padding:6px 8px}
.menu-haut .wp-block-navigation-item__content.actif,.menu-haut .wp-block-navigation-item__content:hover{background:var(--cuivre)}
.wp-block-navigation.menu-haut .wp-block-navigation__responsive-container.is-menu-open{background-color:var(--nuit)!important;color:var(--blanc)!important}
.wp-block-navigation.menu-haut .is-menu-open .wp-block-navigation__responsive-container-content{align-items:flex-start;padding-top:64px}
.wp-block-navigation.menu-haut .is-menu-open .wp-block-navigation__container{align-items:flex-start;gap:6px;font-size:15px;line-height:24px;letter-spacing:.8px}
.wp-block-navigation.menu-haut .is-menu-open .wp-block-navigation-item__content{padding:10px 12px}
.wp-block-buttons.entete-cta{display:flex;flex:none;gap:10px}

/* héros */
.hero,.bandeau{position:relative;background:var(--ardoise);color:var(--blanc)}
.hero::before,.bandeau::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='none'%3E%3Cpath d='M0 250C60 40 170 40 210 170s-70 240-30 300 150-120 260-310S760-30 980 40s210 90 460 10' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.4'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.hero{padding:32px 0 88px}
.hero-grille{position:relative;display:grid;grid-template-columns:1.12fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:52px;line-height:64px}
.hero-txt>p{max-width:560px;margin:22px 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hero-tel{display:grid;grid-template-columns:30px auto;column-gap:12px;align-items:center;line-height:22px;font-weight:700}
.hero-tel::before{content:"";grid-row:span 2;width:30px;height:30px;background:var(--cuivre);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.6 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.6 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-tel-label{font-size:12px;font-weight:400}
.hero-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.hero-photos img{width:100%;height:430px;object-fit:cover}
.hero-photos figure.hero-p1{margin-top:64px}

/* compétences */
.competences{padding:104px 0 96px}
.comp-tete{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:end}
.comp-tete h2{max-width:620px}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:64px}
.trois article::before{content:"";display:block;width:58px;height:58px;background:var(--cuivre);-webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}
.trois article .wp-block-heading{margin:26px 0 10px;font-size:22px;line-height:32px}
.ic-balance{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 7v33M12 40h24M9 13h30M9 13 3 27h12zM39 13l-6 14h12z'/%3E%3C/svg%3E")}
.ic-colonnes{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 17 24 6l18 11zM8 17h32M11 21v15M20 21v15M28 21v15M37 21v15M7 36h34M4 42h40'/%3E%3C/svg%3E")}
.ic-mallette{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 14h38v27H5zM17 14V8h14v6M5 25c12 6 26 6 38 0M21 25h6v5h-6z'/%3E%3C/svg%3E")}
.ic-cadenas{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 22V15a12 12 0 0 1 24 0v7M8 22h32v21H8zM24 30v6'/%3E%3C/svg%3E")}
.ic-bulle{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 8h36v26H22l-9 8v-8H6zM14 17h20M14 25h14'/%3E%3C/svg%3E")}
.ic-document{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 5h28v38H10zM17 15h14M17 23h14M17 31h8'/%3E%3C/svg%3E")}

/* cabinet */
.cabinet{padding:20px 0 120px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.cabinet-photos{position:relative;display:grid;grid-template-columns:1fr 1.2fr;height:600px}
.cabinet-photos img{width:100%;object-fit:cover}
.cabinet-photos figure.cab-p1{margin-top:64px}
.cab-p1 img{height:500px}
.cab-p2 img{height:530px}
.cab-boite{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:16px;width:62%;min-height:150px;padding:24px 28px;background:var(--ardoise);color:var(--blanc);box-shadow:-10px -10px 0 var(--blanc)}
.cb-urgence{color:#C19E7A;font-size:28px;line-height:34px;font-weight:400}
.cb-numero{font-size:18px;line-height:26px;white-space:nowrap}
.cabinet-txt h2{margin-bottom:20px}
ul.coches{display:flex;flex-wrap:wrap;gap:8px 32px;margin:24px 0;padding-top:24px;border-top:1px solid #E7E7E7;font-size:15px;font-weight:700}
.coches li::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:10px;border:1px solid var(--cuivre);color:var(--cuivre);font-size:12px;line-height:1}
.cabinet-txt .wp-block-buttons{margin-top:24px}

/* procédures */
.procedures{padding:88px 0;background:var(--clair)}
.titre-trait{text-align:center;font-size:44px;line-height:56px}
.titre-trait em{color:transparent;font-style:normal;-webkit-text-stroke:1px var(--encre)}
.lignes{max-width:1010px;margin:44px auto 0}
.ligne{display:grid;grid-template-columns:44px 1fr 190px;gap:28px;align-items:center;padding:24px 0;border-top:1px solid #DFDFDF}
.ligne:last-child{border-bottom:1px solid #DFDFDF}
.ligne-simple{grid-template-columns:44px 1fr}
.pastille{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cuivre);color:var(--blanc);font-weight:700}
.ligne h3{margin-bottom:6px;font-size:20px;line-height:30px}
.ligne p:not(.pastille){color:var(--gris);font-size:15px;line-height:26px}
.ligne img{width:190px;height:96px;object-fit:cover}

/* urgence */
.urgence{padding:88px 0;background:var(--ardoise);color:var(--blanc);text-align:center}
.urgence-intro{margin-top:8px}
.vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:24px;margin-top:44px}
.vignette{position:relative;display:grid;background:var(--blanc);color:var(--encre)}
.vignette img{width:100%;height:280px;object-fit:cover}
.vig-titre{margin-top:14px;font-size:17px;line-height:26px;font-weight:700}
.vig-titre a::after{content:"";position:absolute;inset:0}
.vignette p.vig-sous{margin-bottom:14px;color:var(--gris);font-size:13px;line-height:22px}
.vignette:nth-child(2){background:var(--cuivre);color:var(--blanc)}
.vignette:nth-child(2) .vig-sous{color:var(--blanc)}

/* contact */
.contact{padding:96px 0}
.contact h2{margin-bottom:14px}
.cadre .contact-boite.contact-boite{margin:0 18px 18px 0}
.contact-boite{display:grid;gap:20px;padding:36px 40px;background:var(--ardoise);box-shadow:18px 18px 0 var(--cuivre);color:var(--blanc);font-size:20px;line-height:30px;font-weight:700;overflow-wrap:anywhere}
.cb-label{color:#C19E7A;font-size:13px;font-weight:400;line-height:20px}

/* pied */
.pied{padding:18px 0;background:var(--nuit);color:var(--blanc);font-size:13px;line-height:22px}
.pied-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;width:min(1680px,100% - 64px);margin-inline:auto}
.pied .logo .wp-block-site-logo img{height:20px}
.pied .logo-nom{font:600 20px/1 "Cormorant Garamond",Georgia,serif}
.pied-contact{display:flex;flex-wrap:wrap;gap:4px 12px;white-space:nowrap}
.wp-block-navigation.menu-bas{margin-left:auto;font-size:13px;line-height:22px}
.menu-bas .wp-block-navigation__container{gap:4px 12px}

/* pages internes */
.bandeau{padding:40px 0 88px}
.bandeau-court{padding:16px 0 48px}
.bandeau-in{position:relative;max-width:1200px}
.bandeau h1{font-size:48px;line-height:60px}
.bandeau-in>p{max-width:680px;margin-top:16px}
.bandeau-in sup{font-size:.7em;line-height:0}
.bandeau .hero-actions{margin-top:28px}
.cabinet-page{padding-top:104px}
.quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.quatre article{padding-top:18px;border-top:2px solid var(--cuivre)}
.quatre h3{margin-bottom:8px;font-size:20px;line-height:30px}
.domaine{padding:96px 0}
.domaine-clair{background:var(--clair)}
.domaine h2{margin-bottom:16px}
.domaine-photo img{width:100%;height:440px;object-fit:cover}
.cadre .domaine-photo.domaine-photo{margin:0 18px 18px 0}
.domaine-photo{box-shadow:18px 18px 0 var(--cuivre)}
ul.liste-cuivre{margin-top:22px}
.liste-cuivre li{padding:9px 0 9px 22px;border-top:1px solid #E7E7E7;background:linear-gradient(var(--cuivre),var(--cuivre)) 0 19px/8px 8px no-repeat}
.etape{padding:88px 0}
.etape-clair{background:var(--clair)}
.fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.fiche{padding:30px 28px;background:var(--blanc);border-top:3px solid var(--cuivre);box-shadow:0 8px 24px rgba(47,55,62,.08)}
.etape-clair .fiche{box-shadow:none}
.fiche h3{margin-bottom:12px;font-size:21px;line-height:30px}
.fiche p{color:var(--gris);font-size:15px;line-height:26px}
.fiche p + p{margin-top:12px;color:var(--encre)}
.bande-appel{padding:64px 0;background:var(--ardoise);color:var(--blanc);text-align:center}
.bande-actions{margin-top:24px}
.bande-actions .wp-block-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.deux-haut{align-items:start}
.formulaire h2{margin-bottom:24px}
.contact-urgence{margin-top:30px;padding-left:18px;border-left:3px solid var(--cuivre);font-size:15px;line-height:25px}
.legal{padding:72px 0 96px}
.legal .cadre{max-width:820px}
.legal h2{margin:36px 0 10px;font-size:24px;line-height:32px}
.legal h2:first-child{margin-top:0}
.legal p + p{margin-top:12px}
.legal a{text-decoration:underline;overflow-wrap:anywhere}

/* Contact Form 7 */
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ-large{grid-column:1 / -1}
.champs label{display:grid;gap:6px;font-size:14px;font-weight:700}
.wpcf7-form-control-wrap{display:block}
.champs input,.champs textarea{display:block;width:100%;padding:12px 14px;border:1px solid #D9D9D9;border-radius:0;background:var(--blanc);color:var(--encre);font:400 16px/24px "Noto Serif",Georgia,serif}
.champs input:focus,.champs textarea:focus{outline:2px solid var(--cuivre);outline-offset:-1px}
.wpcf7-form .wpcf7-submit{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;padding:8px 26px;border:0;border-radius:999px;background:var(--cuivre);color:var(--blanc);font:700 14px/22px "Noto Serif",Georgia,serif;cursor:pointer}
.wpcf7-spinner{display:none}
.wpcf7-not-valid-tip{margin-top:4px;color:#8A2B1E;font-size:13px;font-weight:400}
.wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:10px 14px;border:1px solid var(--cuivre);color:var(--encre);font-size:14px;line-height:22px}
.form-rgpd{margin-top:14px;color:var(--gris);font-size:13px;line-height:21px}
.form-rgpd a{text-decoration:underline}

:where(a,button,input,textarea):focus-visible{outline:2px solid var(--cuivre);outline-offset:2px}

@media (max-width:1360px){
  .wp-block-buttons.entete-cta{display:none}
  .hero h1{font-size:44px;line-height:56px}
}
@media (max-width:980px){
  .entete-in{position:relative;width:calc(100% - 48px);min-height:88px}
  .logo-nom{font-size:24px}
  .wp-block-navigation.menu-haut .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
  .wp-block-navigation.menu-haut .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .hero{padding-bottom:64px}
  .hero-grille,.deux,.comp-tete,.trois{grid-template-columns:1fr}
  .hero-grille{gap:40px}
  .deux{gap:48px}
  .comp-tete{gap:16px}
  .trois{gap:32px;margin-top:44px}
  .vignettes{grid-template-columns:repeat(3,1fr)}
  .deux-inverse .domaine-photo{order:2}
  .quatre{grid-template-columns:1fr 1fr}
  .fiches{grid-template-columns:1fr}
  .bandeau{padding:24px 0 64px}
}
@media (max-width:640px){
  .logo{gap:8px}
  .logo-nom{font-size:19px}
  .logo .wp-block-site-logo img{height:20px}
  .hero h1{font-size:34px;line-height:44px}
  h2{font-size:29px;line-height:40px}
  .titre-trait{font-size:34px;line-height:44px}
  .hero-photos img{height:260px}
  .hero-photos figure.hero-p1{margin-top:32px}
  .competences{padding:64px 0}
  .cabinet{padding:0 0 72px}
  .cabinet-photos{height:430px}
  .cabinet-photos figure.cab-p1{margin-top:48px}
  .cab-p1 img{height:340px}
  .cab-p2 img{height:360px}
  .cab-boite{flex-direction:column;align-items:flex-start;gap:4px;width:78%;min-height:0;padding:18px 20px}
  .procedures,.urgence,.contact{padding:64px 0}
  .ligne{grid-template-columns:44px 1fr;gap:12px 16px}
  .ligne .wp-block-image{grid-column:1 / -1}
  .ligne img{width:100%;height:150px}
  .vignettes{grid-template-columns:1fr}
  .vignette img{height:200px}
  .contact-boite{padding:28px 24px;font-size:17px}
  .pied-in{justify-content:center;text-align:center}
  .pied-contact{justify-content:center}
  .wp-block-navigation.menu-bas{margin-left:0}
  .menu-bas .wp-block-navigation__container{justify-content:center}
  .bandeau h1{font-size:36px;line-height:46px}
  .bandeau-court{padding:8px 0 40px}
  .domaine,.etape{padding:64px 0}
  .domaine-photo img{height:280px}
  .quatre,.champs{grid-template-columns:1fr}
  .cabinet-page{padding-top:64px}
  .legal{padding:56px 0 64px}
}
@media (max-width:360px){
  .logo-nom{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}