/*
Theme Name: Accent Aigu Design
Theme URI: https://accentaigudesign.com
Author: Accent Aigu Design
Author URI: https://accentaigudesign.com
Description: Thème sur mesure, minimaliste et épuré, pour une agence de traduction japonais / anglais vers français. Basé sur une grille éditoriale, une typographie soignée et une palette inspirée du bleu indigo traditionnel japonais (aizome). Couleurs, polices, textes et boutons de la page d'accueil sont réglables depuis Apparence → Personnaliser.
Version: 1.15.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: accent-aigu
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* -----------------------------------------------------------
   0. Design tokens
   Les 5 variables ci-dessous (--paper, --ink, --accent, --serif,
   --sans) sont réglables depuis Apparence → Personnaliser. Le thème
   les surcharge via une feuille de style inline générée par
   inc/customizer.php. Tout le reste de la palette (tons clairs,
   bordures, indigo profond…) est calculé automatiquement à partir
   d'elles, pour rester cohérent quel que soit le réglage choisi.
----------------------------------------------------------- */
:root{
  --paper: #F6F5F0;
  --ink: #1B1B1E;
  --accent: #2F3E58;
  --accent-2: #9C6B30;
  --white: #FFFFFF;
  --on-image: #F5F4EF;

  --dark-bg: #15161B;
  --dark-text: #EDEBE3;
  --dark-accent: #7C93BE;

  --paper-alt: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
  --stone: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --accent-deep: color-mix(in srgb, var(--accent) 78%, black);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --jp: "Noto Serif JP", var(--serif);

  /* alias conservés pour compatibilité interne */
  --indigo: var(--accent);
  --indigo-deep: var(--accent-deep);

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
}

/* Mode sombre : une seule ligne suffit à retourner toute la palette,
   puisque le reste des couleurs (bordures, tons doux, indigo profond…)
   est calculé automatiquement à partir de --paper / --ink / --accent. */
html[data-theme="dark"]{
  --paper: var(--dark-bg);
  --ink: var(--dark-text);
  --accent: var(--dark-accent);
}
html{ transition: background-color .2s ease; }
body{ transition: background-color .25s ease, color .25s ease; }

/* En mode sombre, un bouton "contour" avec une couleur personnalisée
   (ex. l'ocre secondaire) peut devenir peu lisible sur un fond très
   sombre. On mélange automatiquement un peu de la couleur de texte du
   mode sombre (claire) à la couleur choisie, pour garder un contraste
   suffisant quelle que soit la couleur personnalisée. */
html[data-theme="dark"] .btn-outline{
  border-color: color-mix(in srgb, var(--btn-color, var(--ink)) 55%, var(--ink));
  color: color-mix(in srgb, var(--btn-color, var(--ink)) 55%, var(--ink));
}
html[data-theme="dark"] .btn-outline:hover{
  background: color-mix(in srgb, var(--btn-color, var(--ink)) 55%, var(--ink));
  color: var(--paper);
}

/* -----------------------------------------------------------
   1. Reset & base
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea{ font-family: inherit; font-size: 1rem; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.screen-reader-text{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -----------------------------------------------------------
   2. Typography
----------------------------------------------------------- */
h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.4rem, 4.6vw, 4.2rem); letter-spacing: -0.01em; }
h2{ font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3{ font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 500; }
p{ margin: 0 0 1.2em; max-width: 62ch; }
.lede{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 46ch;
}
small, .meta{ font-size: 0.875rem; color: var(--stone); }

.link-underline{
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1em;
  transition: opacity .2s ease;
}
.link-underline:hover{ opacity: 0.65; }

/* -----------------------------------------------------------
   3. Boutons
   Chaque bouton peut recevoir sa propre couleur, réglable
   individuellement depuis Apparence → Personnaliser, via une
   variable CSS posée en style inline : style="--btn-color:#…".
   .btn-fill = bouton plein ; .btn-outline = bouton contour.
   Deux boutons côte à côte peuvent ainsi avoir deux couleurs
   différentes sans toucher au code.
----------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}

.btn-fill{
  background: var(--btn-color, var(--accent));
  border-color: var(--btn-color, var(--accent));
  color: var(--white);
}
.btn-fill:hover{ filter: brightness(0.9); }

.btn-outline{
  background: transparent;
  border-color: var(--btn-color, var(--ink));
  color: var(--btn-color, var(--ink));
}
.btn-outline:hover{
  background: var(--btn-color, var(--ink));
  color: var(--white);
}

/* rétro-compatibilité pour d'anciens appels .btn-primary */
.btn-primary{ background: var(--btn-color, var(--accent)); border-color: var(--btn-color, var(--accent)); color: var(--white); }
.btn-primary:hover{ filter: brightness(0.9); }

/* -----------------------------------------------------------
   4. Site header / nav
----------------------------------------------------------- */
.site-header{
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-branding{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.site-title{
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
}
.site-title a{ display: inline-block; }
.site-tagline{
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--stone);
  margin: 0;
}
.custom-logo{ max-height: 44px; width: auto; }

/* -----------------------------------------------------------
   17. Shortcodes [columns] / [column] — contenu classique
----------------------------------------------------------- */
.aa-columns{
  display: grid;
  gap: 1.8rem;
  margin: 2rem 0;
}
.aa-columns-2{ grid-template-columns: repeat(2, 1fr); }
.aa-columns-3{ grid-template-columns: repeat(3, 1fr); }
.aa-columns-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px){
  .aa-columns-2, .aa-columns-3, .aa-columns-4{ grid-template-columns: 1fr; }
}
.aa-column > *:last-child{ margin-bottom: 0; }

.site-header-right{
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* Bouton clair / sombre */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
.theme-toggle .icon-moon{ display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }
.theme-toggle:hover{ border-color: var(--accent); color: var(--accent); }

/* Sélecteur de langue — menu déroulant natif (<details>), sans JS */
.lang-switch{ position: relative; }
.lang-switch summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.lang-switch summary::-webkit-details-marker{ display: none; }
.lang-switch summary::after{
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
}
.lang-switch[open] summary::after{ transform: rotate(180deg); }
.lang-switch ul{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 30;
  padding: 0.4rem;
}
.lang-switch li{ margin: 0; }
.lang-switch a{
  display: block;
  padding: 0.5em 0.7em;
  font-size: 0.88rem;
  border-radius: var(--radius);
}
.lang-switch a:hover{ background: var(--paper-alt); }
.lang-switch a[aria-current="true"]{ color: var(--accent); font-weight: 600; }

.lang-switch-mobile{ display: none; }

.primary-nav ul{
  display: flex;
  gap: 2.2rem;
}
.primary-nav a{
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.nav-lang-primary{ display: block; }
.nav-lang-secondary{
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  color: var(--stone);
  margin-top: 0.1em;
}
.primary-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item a::after{ transform: scaleX(1); }

.menu-toggle{
  display: none;
  background: none;
  border: none;
  width: 32px; height: 24px;
  position: relative;
  z-index: 41;
  padding: 0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.menu-toggle span{ top: 11px; }
.menu-toggle span::before{ top: -8px; }
.menu-toggle span::after{ top: 8px; }
.menu-toggle[aria-expanded="true"] span{ background: transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform: rotate(45deg); top: 0; }
.menu-toggle[aria-expanded="true"] span::after{ transform: rotate(-45deg); top: 0; }

@media (max-width: 820px){
  .menu-toggle{ display: block; }
  .site-header-right > .lang-switch{ display: none; }
  .lang-switch-mobile{ display: block; margin-bottom: 2rem; }
  .primary-nav{
    position: fixed; inset: 0;
    background: var(--paper);
    padding: 6rem var(--gutter) 2rem;
    transform: translateY(-100%);
    transition: transform .3s ease;
    z-index: 40;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav.is-open{ transform: translateY(0); }
  .primary-nav ul{ flex-direction: column; gap: 1.6rem; }
  .primary-nav a{ font-size: 1.4rem; font-family: var(--serif); }

  /* Le menu déroulant des langues, en absolu, pouvait sortir de l'écran
     dans le panneau mobile : on le repasse en flux normal. */
  .lang-switch-mobile .lang-switch ul{
    position: static;
    margin-top: 0.6rem;
    box-shadow: none;
    width: fit-content;
  }
}

/* -----------------------------------------------------------
   5. Hero (page d'accueil)
----------------------------------------------------------- */
.hero{
  padding-block: clamp(3rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--line);
}
.hero.has-bg-image{
  background-size: cover;
  background-position: center;
}
.hero.has-bg-image .hero-eyebrow,
.hero.has-bg-image h1,
.hero.has-bg-image .lede,
.hero.has-bg-image .hero-glyph{
  color: var(--on-image);
}
.hero .container{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: center;
}
.hero-eyebrow{
  font-family: var(--jp);
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.hero h1{ margin-bottom: 0.6em; }
.btn-row{
  margin-top: 2.2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-glyph{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--jp);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.4em;
  color: var(--accent);
  justify-self: end;
  opacity: 0.85;
}
@media (max-width: 820px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-glyph{ display: none; }
}

/* -----------------------------------------------------------
   6. Sections & panneaux
----------------------------------------------------------- */
.section{ padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.6rem;
}
.section-head h2{ margin: 0; }

.panel-dark{
  background: var(--accent-deep);
  color: var(--paper);
}
.panel-dark h2, .panel-dark h3{ color: var(--white); }
.panel-dark .lede{ color: color-mix(in srgb, var(--paper) 75%, var(--accent-deep)); }

/* Aperçu des services (page d'accueil) */
.service-rows{ border-top: 1px solid var(--line); }
.service-row{
  display: grid;
  grid-template-columns: 0.9fr 2fr;
  gap: 2rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}
.service-row .lang-pair{
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}
.service-row h3{ margin-bottom: 0.4em; }
.service-row p{ margin-bottom: 0; color: var(--ink-soft); }
@media (max-width: 720px){
  .service-row{ grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Mise en page deux colonnes (À propos, bloc citation) */
.split{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 820px){
  .split{ grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   7. Entry content (éditeur Gutenberg : Services / À propos)
----------------------------------------------------------- */
.entry-content{ max-width: 74ch; }
.entry-content > *:first-child{ margin-top: 0; }
.entry-content h2{
  border-top: 1px solid var(--line);
  margin-top: 2.6rem;
  padding-top: 2.4rem;
}
.entry-content > h2:first-child,
.entry-content > h3:first-child{
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.entry-content h3{ margin-top: 1.8rem; }
.entry-content ul, .entry-content ol{
  margin: 0 0 1.2em;
  padding-left: 1.3em;
  max-width: 62ch;
}
.entry-content ul{ list-style: disc; }
.entry-content ol{ list-style: decimal; }
.entry-content blockquote{
  border-left: 2px solid var(--accent);
  margin: 1.6em 0;
  padding-left: 1.4em;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------
   8. Page Contact
----------------------------------------------------------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
}
.contact-info dt{
  font-size: 0.85rem;
  color: var(--stone);
  margin-top: 1.4rem;
}
.contact-info dt:first-child{ margin-top: 0; }
.contact-info dd{
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
}

.form-field{ margin-bottom: 1.4rem; }
.form-field label{
  display: block;
  font-size: 0.85rem;
  color: var(--stone);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0;
  color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-bottom-color: var(--accent);
}
.form-field textarea{ resize: vertical; min-height: 120px; }

.form-notice{
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-alt);
  font-size: 0.95rem;
}
.form-notice.is-error{ border-left-color: #A5432F; }

/* -----------------------------------------------------------
   9. Pied de page (3 zones de widgets)
----------------------------------------------------------- */
.site-footer{
  background: var(--accent-deep);
  color: var(--paper);
  padding-block: 3.5rem 2rem;
}
.site-footer a{ color: var(--paper); }
.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246,245,240,0.15);
}
.footer-col h4{
  color: var(--white);
  font-size: 1rem;
  margin: 0 0 0.9rem;
}
.footer-col p{ color: color-mix(in srgb, var(--paper) 78%, var(--accent-deep)); max-width: 40ch; }
.footer-col .widget{ margin-bottom: 1.8rem; }
.footer-col .widget:last-child{ margin-bottom: 0; }
.footer-col ul li{ margin-bottom: 0.6rem; }
.footer-col a{ opacity: 0.85; }
.footer-col a:hover{ opacity: 1; }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--paper) 55%, var(--accent-deep));
}
@media (max-width: 720px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   10. Grille tarifaire (réutilisable — page Tarifs)
   Structure minimale à copier :

   <div class="pricing-grid">
     <div class="pricing-card">
       <p class="pricing-card-name">Nom du forfait</p>
       <p class="pricing-card-price">450&nbsp;€<span>/ document</span></p>
       <p class="pricing-card-desc">Description courte.</p>
       <ul class="pricing-card-features">
         <li>Caractéristique</li>
       </ul>
       <a class="btn btn-fill" href="/contact/">Demander un devis</a>
     </div>
   </div>

   Ajoutez "pricing-card-featured" à une carte pour la mettre en avant.
----------------------------------------------------------- */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: stretch;
}
@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
.pricing-card{
  display: flex;
  flex-direction: column;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.pricing-card.pricing-card-featured{
  border-color: var(--accent);
  background: var(--paper-alt);
  position: relative;
}
.pricing-card.pricing-card-featured::before{
  content: attr(data-badge);
  position: absolute;
  top: -0.7em;
  left: 2.2rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3em 0.8em;
  border-radius: var(--radius);
}
.pricing-card-name{
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.pricing-card-price{
  font-family: var(--serif);
  font-size: 1.65rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.pricing-card-price span{
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--stone);
  margin-left: 0.2em;
}
.pricing-card-desc{
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
}
.pricing-card-features{
  margin: 0 0 1.8rem;
  flex-grow: 1;
}
.pricing-card-features li{
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.7em;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.pricing-card-features li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.pricing-card .btn{ align-self: flex-start; }

/* -----------------------------------------------------------
   11. Bandeau CTA « Demande de devis » (au-dessus du pied de page,
   affiché sur toutes les pages)
----------------------------------------------------------- */
.cta-band{
  background: var(--accent);
  color: var(--white);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.cta-band h2{ color: var(--white); margin-bottom: 0.6rem; }
.cta-band p{
  color: color-mix(in srgb, var(--white) 85%, var(--accent));
  max-width: 56ch;
  margin-inline: auto;
}
.cta-band .btn-row{
  justify-content: center;
  margin-top: 1.8rem;
}

/* -----------------------------------------------------------
   12. Page Réalisations (実績) — liste par catégorie
----------------------------------------------------------- */
.achievement-list{ border-top: 1px solid var(--line); }
.achievement-block{
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}
.achievement-block h3{ margin-bottom: 0.8rem; }
.achievement-block ul{
  list-style: disc;
  padding-left: 1.3em;
  max-width: 62ch;
}
.achievement-block li{
  color: var(--ink-soft);
  margin-bottom: 0.5em;
}

/* -----------------------------------------------------------
   14. Page À propos — 2 blocs côte à côte (agence / profil)
----------------------------------------------------------- */
.about-blocks{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 820px){
  .about-blocks{ grid-template-columns: 1fr; }
}
.about-block{
  position: relative;
  padding: 2.2rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
}
.about-block-profile{ border-top-color: var(--accent-2); }

.about-block-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  color: var(--white);
  background: var(--accent);
}
.about-block-profile .about-block-icon{ background: var(--accent-2); }

.about-block h2{ margin-bottom: 1rem; }

html[data-skin="modern"] .about-block{
  border-color: transparent;
  border-top: none;
  background: var(--paper-alt);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-skin="modern"] .about-block:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
html[data-skin="modern"] .about-block-icon{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent-2)));
}
html[data-skin="modern"] .about-block-profile .about-block-icon{
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 65%, var(--accent)));
}

/* -----------------------------------------------------------
   15. Page Tarifs — déroulement en 6 étapes (ご納品までの流れ)
----------------------------------------------------------- */
.process-block{ margin-top: 4rem; }
.process-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 900px){
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .process-grid{ grid-template-columns: 1fr; }
}
.process-step{
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.process-step-number{
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.process-step h3{ margin-bottom: 0.4rem; font-size: 1.1rem; }
.process-step p{ font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0; }

html[data-skin="modern"] .process-step{
  border-color: transparent;
  background: var(--paper-alt);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-skin="modern"] .process-step:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
html[data-skin="modern"] .process-step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--white);
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 700;
}

/* -----------------------------------------------------------
   16. Intégration Contact Form 7
   Reprend l'apparence du formulaire de contact intégré, en ciblant
   directement les classes générées par le plugin — fonctionne pour
   n'importe quel formulaire CF7 déposé sur le site, sans réglage
   supplémentaire, et suit les deux styles visuels (Éditorial / Moderne).
----------------------------------------------------------- */
.wpcf7-form p{ margin-bottom: 1.4rem; }
.wpcf7-form label{
  display: block;
  font-size: 0.85rem;
  color: var(--stone);
  margin-bottom: 0.4rem;
}
.wpcf7-form-control-wrap{ display: block; position: relative; }
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  border-radius: 0;
  appearance: none;
}
.wpcf7-form-control.wpcf7-textarea{ min-height: 120px; resize: vertical; }
.wpcf7-form-control:focus{
  outline: none;
  border-bottom-color: var(--accent);
}
.wpcf7-form-control.wpcf7-acceptance{ width: auto; }
.wpcf7-list-item{ margin-left: 0; }
.wpcf7-acceptance label{
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.wpcf7-form-control.wpcf7-submit{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  transition: background .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wpcf7-form-control.wpcf7-submit:hover{ filter: brightness(0.9); }
.wpcf7-spinner{ margin-left: 0.6em; }

html[data-skin="modern"] .wpcf7-form-control.wpcf7-submit{
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent-2)));
}
html[data-skin="modern"] .wpcf7-form-control.wpcf7-submit:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: none;
}
html[data-skin="modern"] .wpcf7-form-control:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.wpcf7-not-valid-tip{
  color: #A5432F;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  display: block;
}
.wpcf7-response-output{
  padding: 1rem 1.2rem;
  margin: 1.6rem 0 0;
  border-left: 2px solid var(--accent);
  background: var(--paper-alt);
  font-size: 0.95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output{
  border-left-color: #A5432F;
}
.wpcf7-form.sent .wpcf7-response-output{
  border-left-color: var(--accent);
}

/* -----------------------------------------------------------
   17. Masquage de l'icône reCAPTCHA
   Google exige, en contrepartie, d'afficher la mention légale —
   voir .recaptcha-disclosure sur la page Contact.
----------------------------------------------------------- */
.grecaptcha-badge{
  visibility: hidden !important;
}

/* =============================================================
   13. Skin « Moderne & dynamique »
   Activé via Personnaliser → Style visuel du site. Même palette de
   marque (indigo + ocre), même structure HTML — juste une expression
   plus contemporaine : formes arrondies, ombres portées, dégradés.
============================================================= */
html[data-skin="modern"]{
  --radius: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(20,20,24,.07);
  --shadow-md: 0 16px 36px -12px rgba(20,20,24,.22);
}

/* Boutons : forme pilule, dégradé, effet de levée au survol */
html[data-skin="modern"] .btn{
  border-radius: var(--radius-pill);
  padding: 0.95em 1.9em;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
html[data-skin="modern"] .btn-fill,
html[data-skin="modern"] .btn-primary{
  background: linear-gradient(135deg, var(--btn-color, var(--accent)), color-mix(in srgb, var(--btn-color, var(--accent)) 65%, var(--accent-2)));
  border: none;
  box-shadow: var(--shadow-sm);
}
html[data-skin="modern"] .btn-fill:hover,
html[data-skin="modern"] .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: none;
}
html[data-skin="modern"] .btn-outline{ border-width: 2px; }
html[data-skin="modern"] .btn-outline:hover{ transform: translateY(-2px); }

/* Navigation : surbrillance en pilule plutôt que soulignement */
html[data-skin="modern"] .primary-nav ul{ gap: 1.4rem; }
html[data-skin="modern"] .primary-nav a::after{ display: none; }
html[data-skin="modern"] .primary-nav a{
  padding: 0.3em 0.65em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
html[data-skin="modern"] .primary-nav a:hover,
html[data-skin="modern"] .primary-nav .current-menu-item a{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
html[data-skin="modern"] .lang-switch summary,
html[data-skin="modern"] .theme-toggle{ border-radius: var(--radius-pill); }

/* Bannière : halo de couleur en arrière-plan, coins arrondis */
html[data-skin="modern"] .hero{
  border-bottom: none;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
}
html[data-skin="modern"] .hero::before{
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 55%);
  pointer-events: none;
}
html[data-skin="modern"] .hero .container{ position: relative; z-index: 1; }
html[data-skin="modern"] .hero-eyebrow{
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  padding: 0.4em 1em;
  border-radius: var(--radius-pill);
}
html[data-skin="modern"] .hero.has-bg-image .hero-eyebrow{
  background: color-mix(in srgb, var(--white) 18%, transparent);
}

/* En-têtes de section : barre dégradée plutôt que filet */
html[data-skin="modern"] .section-head{
  border-bottom: none;
  position: relative;
  padding-bottom: 1.2rem;
}
html[data-skin="modern"] .section-head::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Services : lignes éditoriales -> cartes à ombre */
html[data-skin="modern"] .service-rows{
  border-top: none;
  display: grid;
  gap: 1.1rem;
}
html[data-skin="modern"] .service-row{
  display: block;
  border-bottom: none;
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-skin="modern"] .service-row:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
html[data-skin="modern"] .service-row .lang-pair{
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
  margin-bottom: 0.8rem;
}

/* Bloc citation : dégradé plutôt qu'aplat, en carte détachée */
html[data-skin="modern"] .panel-dark{
  background: linear-gradient(135deg, var(--accent-deep), color-mix(in srgb, var(--accent-deep) 55%, var(--accent-2)));
  border-radius: var(--radius);
  margin-inline: var(--gutter);
}

/* Grille tarifaire : coins plus généreux, mise en avant en dégradé léger */
html[data-skin="modern"] .pricing-card{
  border-radius: calc(var(--radius) + 6px);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-skin="modern"] .pricing-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
html[data-skin="modern"] .pricing-card.pricing-card-featured{
  background: linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--accent) 9%, var(--paper)));
  border: 2px solid var(--accent);
}
html[data-skin="modern"] .pricing-card-featured::before{ border-radius: var(--radius-pill); }

/* Réalisations : blocs en carte plutôt qu'en liste à filets */
html[data-skin="modern"] .achievement-list{ border-top: none; display: grid; gap: 1.1rem; }
html[data-skin="modern"] .achievement-block{
  border-bottom: none;
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
}

/* Bandeau CTA pied de page : dégradé, en carte détachée */
html[data-skin="modern"] .cta-band{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--radius);
  margin-inline: var(--gutter);
  margin-block: 2rem;
}

/* Grille tarifaire et cartes : ombre au survol cohérente avec le reste */
html[data-skin="modern"] .form-field input:focus,
html[data-skin="modern"] .form-field textarea:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}