/*
Theme Name: Deriaz Design
Theme URI: https://deriazdesign.ch
Author: Deriaz Design
Description: Thème sur mesure pour Deriaz Design, atelier de publicité et de signalétique à L'Orient (Vallée de Joux). Sans page builder, sans framework CSS.
Version: 0.3.7
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deriaz-design
Tags: custom-menu, custom-logo, translation-ready
*/

/* RÈGLE COULEUR TEAL — pour tout futur éditeur :
   #17A2A6  → aplats, éclats, bordures, pictos. JAMAIS du petit texte sur fond clair.
   #4FD8DC  → texte & liens teal sur fond SOMBRE, focus.
   #0C5F63  → texte & liens teal sur fond CLAIR, dégradés, ombres. */

/* ==========================================================================
   Le commentaire ci-dessus n'est PAS décoratif : c'est lui qui fait exister
   le thème dans Apparence > Thèmes. S'il disparaît, le thème disparaît.

   Sommaire  (ordre de lecture du fichier)
   1.  Jetons de design (variables)
   2.  Base et réinitialisation
   3.  Utilitaires de mise en page
   4.  En-tête et navigation
   5.  Hero
   6.  Sections et couture fragmentée
   7.  Cartouche de section
   8.  Titres de section
   9.  Boutons
   10. Section claire « Atelier » et équipements
   11. Prestations
   12. Réalisations
   13. Étapes
   14. Contact
   15. Contenu éditorial (.dd-prose)  — habillage de the_content() sur les gabarits internes
   16. Formulaire de contact
   17. Pied de page
   18. Animations et accessibilité  — motif éclats, révélations seek-safe, prefers-reduced-motion
   ========================================================================== */


/* 0. POLICES AUTO-HÉBERGÉES
   --------------------------------------------------------------------------
   Sous-jeu latin uniquement (suffisant pour le français de Suisse romande),
   fichiers dans assets/fonts/. Archivo et Big Shoulders Display sont des
   polices variables : un seul .woff2 couvre toute la plage de graisses.
   font-display: swap — le texte s'affiche tout de suite en police système
   puis bascule. Les deux polices critiques sont préchargées (inc/enqueue.php). */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/archivo-latin.woff2") format("woff2");
	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: "Big Shoulders Display";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("assets/fonts/big-shoulders-display-latin.woff2") format("woff2");
	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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
	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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
	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;
}


/* 1. JETONS DE DESIGN
   --------------------------------------------------------------------------
   Source unique : docs/superpowers/specs/2026-09-08-refonte-visuelle-vitrine-eclats/tokens.css
   Direction FINALE « Vitrine + Éclats » — base sombre (D) + section claire (B2).
   Changer une valeur ici la change partout dans le site. */

:root {

  /* ======================================================================
     BASE SOMBRE  —  majorité du site (direction D)
     ====================================================================== */

  /* --- Fonds & surfaces --- */
  --dd-bg:              #0A0C0D;   /* fond le plus profond */
  --dd-bg-alt:          #101415;   /* alternance de section, tiroir menu */
  --dd-surface:         #1A2123;   /* cartes / panneaux (vraie surface plus claire) */
  --dd-surface-raised:  #232C2E;   /* survol de carte, encart CTA */
  --dd-surface-sunken:  #12181A;   /* champs de formulaire */

  /* --- Bordures --- */
  --dd-border:          #2A3537;
  --dd-border-strong:   #3A484A;
  --dd-border-accent:   #17A2A6;

  /* --- Texte sur sombre --- */
  --dd-text:            #F4F7F7;
  --dd-text-soft:       #AEBDBE;
  --dd-text-muted:      #7E8E8F;
  --dd-text-hero:       #E9F3F3;   /* texte sur la photo du hero (sur-titre, intro) */
  --dd-text-on-accent:  #04191A;   /* libellé sur aplat teal (boutons, cartouche) */
  --dd-placeholder:     #6E7C7D;

  /* --- Accent de marque : le teal du logo --- */
  --dd-accent:          #17A2A6;   /* aplats, UI, filets, grands titres */
  --dd-accent-bright:   #4FD8DC;   /* liens + petit texte sur sombre, focus, pictos */
  --dd-accent-deep:     #0C5F63;   /* dégradés, ombres, plans arrière du titre */
  --dd-accent-hover:    #1FB3B7;   /* bouton plein au survol */
  --dd-accent-wash:     rgba(23, 162, 166, 0.14);

  /* --- 2e lumière --- */
  --dd-white:           #FFFFFF;

  /* --- Frappe corail : UNE seule occurrence par écran (médaillon .dd-kicker__n).
     Sur encre --dd-ink : ~5:1 (AA). Jamais en texte sur fond clair. --- */
  --dd-strike:          #FF6A3D;

  /* --- États --- */
  --dd-success:         #2FB67A;   /* bordure des messages de succès */
  --dd-success-text:    #5FD39B;   /* texte de succès : ~6:1 sur surfaces sombres (AA) */
  --dd-warning:         #E8A33D;
  --dd-error:           #F2555A;   /* bordures de champ en erreur */
  --dd-error-text:      #FF8A8E;   /* texte d'erreur : ~6:1 sur les surfaces sombres (AA), là où #F2555A tombe à ~4,2:1 */
  --dd-focus:           #4FD8DC;

  /* ======================================================================
     SECTION CLAIRE  —  une seule (« De l'idée à la pose », direction B2)
     Activées uniquement sous .dd-section--light
     ====================================================================== */
  --dd-paper:               #F4F5F5;
  --dd-paper-alt:           #E9EBEC;
  --dd-surface-light:       #FFFFFF;
  --dd-ink:                 #0C0F12;   /* texte sur clair — 17:1 */
  --dd-text-soft-on-light:  #5B6467;   /* texte doux sur clair — 5.8:1 AA */
  --dd-border-light:        #D5D9DA;
  --dd-teal-ink:            #0C5F63;   /* TEXTE / liens teal sur clair — 6.7:1 AA */

  /* ======================================================================
     TYPOGRAPHIE
     ====================================================================== */
  --dd-font-display: "Big Shoulders Display", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --dd-font-text:    "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --dd-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --dd-fs-overline:  0.8125rem;
  --dd-fs-kicker:    0.78rem;
  --dd-fs-meta:      0.875rem;
  --dd-fs-body:      1.0625rem;
  --dd-fs-body-lg:   clamp(1.125rem, 0.55vw + 1rem, 1.375rem);
  --dd-fs-h3:        clamp(1.6rem, 1.6vw + 1rem, 2.4rem);
  --dd-fs-h2:        clamp(2.25rem, 4vw + 1rem, 4rem);
  --dd-fs-h1:        clamp(3.25rem, 8.5vw + 0.5rem, 8rem);
  --dd-fs-number:    clamp(2.25rem, 5vw + 1rem, 5rem);

  --dd-lh-tight:     0.92;
  --dd-lh-title:     0.98;
  --dd-lh-body:      1.62;

  --dd-tracking-overline: 0.24em;
  --dd-tracking-kicker:   0.16em;
  --dd-tracking-button:   0.08em;

  /* ======================================================================
     GRILLE & ESPACEMENT
     ====================================================================== */
  --dd-maxw:        1280px;
  --dd-maxw-wide:   1460px;
  --dd-gutter:      clamp(1.25rem, 4vw, 3rem);
  --dd-col-gap:     clamp(1rem, 2vw, 2rem);
  --dd-section-y:   clamp(4.5rem, 10vw, 9rem);

  --dd-space-1: 0.25rem;
  --dd-space-2: 0.5rem;
  --dd-space-3: 0.75rem;
  --dd-space-4: 1rem;
  --dd-space-5: 1.5rem;
  --dd-space-6: 2rem;
  --dd-space-7: 3rem;
  --dd-space-8: 4rem;
  --dd-space-9: 6rem;
  --dd-space-10: 8rem;

  --dd-bp-sm: 40rem;
  --dd-bp-md: 52rem;
  --dd-bp-lg: 64rem;
  --dd-bp-xl: 80rem;

  /* ======================================================================
     FORME  —  les angles se COUPENT, ils ne s'arrondissent pas
     ====================================================================== */
  --dd-radius:     2px;    /* champs de formulaire uniquement */
  --dd-chamfer:    18px;   /* coupe standard (cartes, boutons, prestations) */
  --dd-chamfer-sm: 12px;   /* boutons compacts */
  --dd-chamfer-lg: 32px;   /* grandes vignettes */

  /* carte D : coin bas-droite coupé */
  --dd-clip-card:  polygon(0 0, 100% 0,
                    100% calc(100% - var(--dd-chamfer)),
                    calc(100% - var(--dd-chamfer)) 100%, 0 100%);
  /* bouton D : haut-gauche + bas-droite */
  --dd-clip-btn:   polygon(var(--dd-chamfer) 0, 100% 0,
                    100% calc(100% - var(--dd-chamfer)),
                    calc(100% - var(--dd-chamfer)) 100%,
                    0 100%, 0 var(--dd-chamfer));
  /* vignette D : coin haut-droite coupé */
  --dd-clip-tile:  polygon(0 0, calc(100% - var(--dd-chamfer-lg)) 0,
                    100% var(--dd-chamfer-lg), 100% 100%, 0 100%);
  /* triangle du fragment .dd-chip logé dans l'encoche bas-droite */
  --dd-clip-chip:  polygon(100% 0, 100% 100%, 0 100%);

  /* couture sombre ↔ clair : dents irrégulières (repli propre si non géré) */
  --dd-seam-top:    polygon(0 0,100% 0,100% 55%,95% 100%,90% 28%,84% 86%,78% 18%,
                    72% 72%,65% 14%,58% 80%,50% 24%,43% 90%,36% 16%,29% 70%,
                    22% 22%,16% 84%,10% 12%,4% 66%,0 30%);
  --dd-seam-bottom: polygon(0 100%,100% 100%,100% 45%,96% 0,90% 72%,84% 14%,78% 82%,
                    71% 24%,64% 86%,57% 18%,50% 76%,43% 10%,36% 84%,29% 26%,
                    22% 78%,15% 16%,9% 88%,3% 32%,0 70%);

  /* ======================================================================
     OMBRES & LUEURS
     ====================================================================== */
  --dd-shadow-card:  0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --dd-shadow-lift:  0 10px 30px -12px rgba(0, 0, 0, 0.45);
  --dd-glow-teal:    0 0 0 1px rgba(23, 162, 166, 0.5),
                     0 10px 34px -8px rgba(23, 162, 166, 0.45);
  --dd-glow-strong:  0 0 34px rgba(23, 162, 166, 0.55),
                     0 0 4px rgba(79, 216, 220, 0.7);

  /* ======================================================================
     MOTION
     ====================================================================== */
  --dd-dur-micro:  160ms;
  --dd-dur-base:   240ms;
  --dd-dur-reveal: 460ms;
  --dd-dur-sign:   900ms;   /* allumage d'enseigne, one-shot */
  --dd-ease-squeegee: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dd-ease-out:      cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ======================================================================
     DIVERS
     ====================================================================== */
  --dd-header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dd-dur-micro:  1ms;
    --dd-dur-base:   1ms;
    --dd-dur-reveal: 1ms;
    --dd-dur-sign:   1ms;
  }
}


/* 2. BASE ET RÉINITIALISATION
   --------------------------------------------------------------------------
   Portée depuis le <style> de la maquette approuvée (règles de base, avant
   .dd-header). Les sections 3 → 15 ci-dessous sont encore l'ancien design ;
   elles seront remplacées par les tâches suivantes. */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dd-header-h) + 1rem); }

body {
	margin: 0;
	background: var(--dd-bg);
	color: var(--dd-text);
	font-family: var(--dd-font-text);
	font-size: var(--dd-fs-body);
	line-height: var(--dd-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg { max-width: 100%; display: block; height: auto; }

a { color: var(--dd-accent-bright); }

/* Anneau de focus visible au clavier uniquement (pas à la souris). */
:focus-visible {
	outline: 3px solid var(--dd-focus);
	outline-offset: 3px;
}

/* Masqué visuellement, mais lu par les lecteurs d'écran. */
.dd-lecteur-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Lien d'évitement : hors écran jusqu'à ce qu'il reçoive le focus clavier. */
/* Cible du lien d'évitement : focusable par programme (tabindex=-1) mais sans
   anneau — l'utilisateur vient d'activer « Aller au contenu », le repère
   visuel serait un grand cadre autour de tout le <main>. */
#contenu:focus { outline: none; }
.dd-skip { position: absolute; left: -9999px; top: 0; z-index: 200; }
.dd-skip:focus {
	left: 1rem;
	top: 1rem;
	background: var(--dd-accent);
	color: var(--dd-text-on-accent);
	padding: .7rem 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Conteneur du sprite SVG d'icônes, retiré du flux. */
.dd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* 3. UTILITAIRES DE MISE EN PAGE
   --------------------------------------------------------------------------
   Portées depuis le <style> de la maquette approuvée (« Vitrine + Éclats »).
   Les sections 3 → 10 ci-dessous sont le portage FIDÈLE de cette maquette ;
   ce qui suit (« 13 bis » → « 15 ») reste l'ancien design, remplacé par les
   tâches 4 et 5. */

/* Compat maquette : le socle gelé (section 2) ne remet pas à zéro les marges
   des éléments de flux ni les listes classées que le <style> de la maquette
   supposait déjà nettoyées. On le rétablit ici, une seule fois. */
h1, h2, h3, h4, p, figure { margin: 0; }
ul[class] { margin: 0; padding: 0; list-style: none; }

/* Le conteneur unique de tout le site : largeur max + gouttières fluides. */
.dd-wrap { width: 100%; max-width: var(--dd-maxw); margin-inline: auto; padding-inline: var(--dd-gutter); }
.dd-wrap--wide { max-width: var(--dd-maxw-wide); }


/* 4. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */

.dd-header { position: sticky; top: 0; z-index: 80; background: rgba(10, 12, 13, .72); border-bottom: 1px solid var(--dd-border); }
/* Le flou est porté par un pseudo-élément et non par .dd-header : sinon
   l'en-tête devient bloc conteneur et rogne le tiroir position:fixed. */
.dd-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .dd-header { background: #0A0C0D; } }
.dd-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--dd-header-h); padding-block: .7rem; }

.dd-logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--dd-text); }
/* Logotype 2026 (« D » éclaté + DERIAZ DESIGN) servi par deriaz_logo(), ou
   image de logo personnalisé WordPress : même dimensionnement. */
.dd-logo img { display: block; height: clamp(36px, 5vw, 48px); width: auto; }
/* Baseline conservée pour le nom accessible du lien, mais hors flux visuel. */
.dd-logo__sig { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.dd-nav { display: none; }
@media (min-width: 64rem) { .dd-nav { display: flex; align-items: center; gap: 1.5rem; } }
/* La liste rendue par wp_nav_menu (menu_class « dd-nav__list ») porte le flex :
   .dd-nav ne contient qu'un <ul>. */
.dd-nav__list { display: flex; align-items: center; gap: 1.5rem; }
.dd-nav a { position: relative; font-family: var(--dd-font-text); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dd-text-soft); text-decoration: none; padding: .45rem 0; }
.dd-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--dd-accent); transition: width var(--dd-dur-micro) var(--dd-ease-out); }
.dd-nav a:hover { color: #fff; }
.dd-nav a:hover::after { width: 100%; }
.dd-nav a[aria-current="page"],
.dd-nav .current-menu-item > a,
.dd-nav .current_page_item > a,
.dd-nav .current-menu-ancestor > a { color: #fff; }
.dd-nav a[aria-current="page"]::after,
.dd-nav .current-menu-item > a::after,
.dd-nav .current_page_item > a::after,
.dd-nav .current-menu-ancestor > a::after { width: 100%; }

.dd-btn.dd-header__cta { display: none; }
@media (min-width: 64rem) { .dd-btn.dd-header__cta { display: inline-flex; } }

/* Case à cocher masquée mais focusable : ouvre le tiroir SANS JavaScript. */
.dd-burger-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Le span enrobant sert de repère de position au bouton JS ci-dessous ; il ne
   dessine rien lui-même. C'est lui, et non le seul label, qu'on retire du
   bureau : sinon le bouton resterait visible au-dessus de 64rem. */
.dd-burger-box { position: relative; display: inline-flex; }
.dd-burger { --dd-chamfer: 8px; display: inline-flex; flex-direction: column; gap: 5px; padding: 12px; cursor: pointer; background: var(--dd-surface); clip-path: var(--dd-clip-btn); }
.dd-burger span { display: block; width: 22px; height: 2px; background: var(--dd-text); }
@media (min-width: 64rem) { .dd-burger-box, .dd-burger { display: none; } }
.dd-burger-toggle:focus-visible + .dd-burger-box .dd-burger { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }

/* Bouton d'amélioration progressive : assets/js/theme.js le dévoile pour
   porter aria-expanded / aria-controls, que la case à cocher seule ne sait pas
   exposer. On le superpose EXACTEMENT au label — transparent, hors flux, donc
   sans décalage de mise en page — plutôt que de le laisser s'afficher avec le
   chrome natif du navigateur à côté de l'icône. Le label reste dessous pour
   le parcours sans JavaScript. */
.dd-burger-js { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: transparent; }
.dd-burger-js:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; }
@media (min-width: 64rem) { .dd-burger-js { display: none; } }

.dd-drawer__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 85; opacity: 0; pointer-events: none; transition: opacity var(--dd-dur-base) var(--dd-ease-out); }
.dd-drawer {
	position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); z-index: 90;
	background: var(--dd-bg-alt); border-left: 2px solid var(--dd-accent);
	transform: translateX(100%); visibility: hidden;
	transition: transform var(--dd-dur-base) var(--dd-ease-squeegee),
	            visibility 0s linear var(--dd-dur-base);
	padding: 5.5rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}
/* Fermé, le tiroir est `visibility:hidden` : ses liens sortent de l'ordre de
   tabulation ET de l'arbre d'accessibilité, alors que `transform` seul les y
   laissait (8 liens fantômes hors écran sur chaque page &lt; 64rem et dès ~175 %
   de zoom). Le `display:flex` reste — il neutralise `[hidden]`, présent
   uniquement pour le repli sans CSS ; le décalage de `visibility` sur la
   transition laisse jouer le glissement de fermeture. */
.dd-drawer__list { display: flex; flex-direction: column; gap: 1rem; }
.dd-drawer a { font-family: var(--dd-font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; color: var(--dd-text); text-decoration: none; }
.dd-drawer a:hover { color: var(--dd-accent-bright); }
.dd-drawer .dd-btn { margin-top: 1rem; justify-content: center; }
.dd-drawer__close { position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; background: var(--dd-surface); --dd-chamfer: 8px; clip-path: var(--dd-clip-btn); }
.dd-drawer__close::before, .dd-drawer__close::after { content: ""; position: absolute; width: 20px; height: 2px; background: var(--dd-text); }
.dd-drawer__close::before { transform: rotate(45deg); }
.dd-drawer__close::after { transform: rotate(-45deg); }
.dd-drawer__close:focus-visible { clip-path: none; outline: 3px solid var(--dd-focus); outline-offset: 3px; }
.dd-burger-toggle:checked ~ .dd-drawer {
	transform: translateX(0); visibility: visible;
	transition: transform var(--dd-dur-base) var(--dd-ease-squeegee), visibility 0s;
}
.dd-burger-toggle:checked ~ .dd-drawer__overlay { opacity: 1; pointer-events: auto; }
@media (min-width: 64rem) { .dd-burger, .dd-drawer, .dd-drawer__overlay { display: none; } }


/* 5. HERO
   -------------------------------------------------------------------------- */

.dd-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding-block: clamp(7rem, 16vh, 12rem) clamp(3.5rem, 9vh, 6.5rem); }
.dd-hero__media { position: absolute; inset: 0; z-index: 0; }
.dd-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: contrast(1.05) saturate(.85) brightness(.6); }
.dd-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 12, 13, .6) 0%, rgba(10, 12, 13, .32) 34%, rgba(10, 12, 13, .92) 100%), radial-gradient(95% 75% at 6% 96%, rgba(23, 162, 166, .34), transparent 55%); }
.dd-hero .dd-shards { left: -3%; bottom: -6%; width: min(62vw, 640px); }
.dd-hero__inner { position: relative; z-index: 3; width: 100%; }
/* align-items:flex-start + petit décalage : quand le sur-titre passe sur 2-3
   lignes en mobile, le losange ne se centre plus verticalement sur tout le bloc. */
.dd-hero__zone { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; font-family: var(--dd-font-mono); font-weight: 600; font-size: var(--dd-fs-kicker); letter-spacing: var(--dd-tracking-kicker); text-transform: uppercase; color: var(--dd-text-hero); }
.dd-hero__zone::before { content: ""; flex: none; margin-top: .2em; width: 10px; height: 10px; background: var(--dd-accent); transform: rotate(12deg); box-shadow: 0 0 14px rgba(23, 162, 166, .8); }
.dd-hero__title { font-family: var(--dd-font-display); font-weight: 800; font-size: var(--dd-fs-h1); line-height: var(--dd-lh-tight); letter-spacing: .012em; text-transform: uppercase; color: var(--dd-white); margin: .4rem 0 1.5rem; }
/* Titre hero : lettres « enseigne » extrudées, arêtes NETTES (ajustement spec
   §2.1.1) — pas de background-clip:text, pas de halo flou. */
.dd-hero__line { display: block; text-shadow: 0 3px 0 var(--dd-accent-deep), 0 7px 16px rgba(0, 0, 0, .5); }
.dd-hero__line--accent { position: relative; width: max-content; max-width: 100%; color: var(--dd-accent-bright); -webkit-text-fill-color: var(--dd-accent-bright); text-shadow: 2px 2px 0 var(--dd-accent), 4px 5px 0 var(--dd-accent-deep), 0 9px 18px rgba(0, 0, 0, .5); }
.dd-hero__line--accent::before { display: none; }
.dd-hero__line--accent::after { content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .03em; height: .12em; z-index: -2; background: var(--dd-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.dd-hero__intro { max-width: 54ch; color: var(--dd-text-hero); font-size: var(--dd-fs-body-lg); margin-bottom: 2rem; }
.dd-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.dd-hero__args { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; font-family: var(--dd-font-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dd-text-soft); }
.dd-hero__args li { display: flex; align-items: center; gap: .6rem; }
.dd-hero__args li::before { content: ""; width: 8px; height: 8px; background: var(--dd-accent); transform: rotate(14deg); flex: none; }
.dd-hero__cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-family: var(--dd-font-mono); font-size: .65rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dd-text-muted); }
.dd-hero__cue i { width: 1px; height: 34px; background: linear-gradient(var(--dd-accent), transparent); }
@media (max-width: 52rem) { .dd-hero__cue { display: none; } }


/* 6. SECTIONS ET COUTURE FRAGMENTÉE  (sombre <-> clair)
   -------------------------------------------------------------------------- */

.dd-section { padding-block: var(--dd-section-y); position: relative; }
/* Un filet net en haut ET en bas des sections alternées : l'écart de luminance
   --dd-bg / --dd-bg-alt (~2 %) ne suffit pas à séparer 4 sections sombres
   d'affilée — sans ça elles se lisent comme une seule dalle. */
.dd-section--alt { background: var(--dd-bg-alt); border-block: 1px solid var(--dd-border); }

/* Flux des gabarits simples (404, index, page, page-prestation,
   single-realisation). Le socle remet p{margin:0} et seul .dd-prose rétablit
   l'interligne des blocs ; ces gabarits, eux, posent des <p> et des <article>
   NUS directement sous .dd-wrap, qui se collaient les uns aux autres.
   La règle est volontairement limitée à ces enfants directs : une marge
   générale sur <p> doublerait l'espacement déjà géré par .dd-prose et par le
   hero. Les marges adjacentes fusionnent, donc après un .dd-shead (qui a sa
   propre marge basse) rien ne s'ajoute. */
.dd-section > .dd-wrap > p + p,
.dd-section > .dd-wrap > .dd-shead + p,
.dd-section > .dd-wrap > .dd-prose + p,
.dd-section > .dd-wrap > .dd-shead + article,
.dd-section > .dd-wrap > p + article,
.dd-section > .dd-wrap > article + article { margin-top: 1.25rem; }

.dd-section--light {
	position: relative; background: var(--dd-paper); color: var(--dd-ink);
	--seam-cut: var(--dd-paper);
	--kicker-notch: var(--dd-paper);
}
.dd-section--light::before, .dd-section--light::after {
	content: ""; position: absolute; left: 0; right: 0; height: 30px; z-index: 3; pointer-events: none;
}
.dd-section--light::before { top: -1px; background: var(--dd-bg); clip-path: var(--dd-seam-top); }
.dd-section--light::after { bottom: -1px; background: var(--dd-bg-alt); clip-path: var(--dd-seam-bottom); }
/* Repli sans clip-path : la couture se réduit à une simple bande sombre de
   30 px (spec §« Dégradations » c). */
@supports not (clip-path: polygon(0 0)) {
	.dd-section--light::before,
	.dd-section--light::after { clip-path: none; }
}


/* 7. CARTOUCHE DE SECTION
   --------------------------------------------------------------------------
   Sur-titre monospace sur aplat teal, avec débris (::before), encoche
   découpée (::after) et numéro d'étape en médaillon (.dd-kicker__n). */

.dd-kicker {
	position: relative; display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--dd-font-mono); font-weight: 600; font-size: var(--dd-fs-kicker);
	text-transform: uppercase; letter-spacing: var(--dd-tracking-kicker);
	color: var(--dd-text-on-accent); background: var(--dd-accent);
	padding: .5em 1.2em .5em .85em; margin-bottom: 1.4rem;
	--kicker-notch: var(--dd-bg);
}
.dd-section--alt .dd-kicker { --kicker-notch: var(--dd-bg-alt); }
.dd-section--light .dd-kicker { --kicker-notch: var(--dd-paper); }
.dd-kicker::before { content: ""; width: .5em; height: .5em; background: var(--dd-text-on-accent); transform: rotate(18deg); flex: none; }
.dd-kicker::after { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: var(--kicker-notch); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.dd-kicker__n {
	position: absolute; top: -10px; right: -13px; line-height: 1; letter-spacing: 0;
	font-size: .66em; color: var(--dd-strike); background: var(--dd-ink);
	border: 1px solid var(--dd-accent-deep); padding: .25em .4em;
}


/* 8. TITRES DE SECTION
   -------------------------------------------------------------------------- */

.dd-shead { position: relative; margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 60ch; }
/* h1 ET h2 : deriaz_entete_section() sort un <h1> sur les gabarits internes
   (404, index, page, page-prestation, single-realisation, archive, contact) et
   un <h2> dans les sections de l'accueil. Même dessin dans les deux cas. */
.dd-shead h1,
.dd-shead h2 {
	font-family: var(--dd-font-display); font-weight: 800; font-size: var(--dd-fs-h2);
	line-height: var(--dd-lh-title); letter-spacing: .012em; text-transform: uppercase;
	color: var(--dd-text); max-width: 22ch;
}
.dd-shead h1 em,
.dd-shead h2 em { font-style: normal; color: var(--dd-accent-bright); }
.dd-shead__lede { margin-top: 1.1rem; max-width: 52ch; color: var(--dd-text-soft); font-size: var(--dd-fs-body-lg); }
/* Intro nue des gabarits internes (résumé de prestation, etc.) : même
   traitement que .dd-shead__lede, sans changer le markup. */
.dd-section > .dd-wrap > .dd-shead + p { max-width: 66ch; color: var(--dd-text-soft); font-size: var(--dd-fs-body-lg); }
.dd-section--light > .dd-wrap > .dd-shead + p { color: var(--dd-text-soft-on-light); }
/* Image d'accroche d'une fiche réalisation (M4) : toutes les tuiles qui
   mènent ici sont de la photo plein cadre — la fiche ouvrait sur du texte. */
.dd-work-hero { position: relative; margin: 0 0 2rem; aspect-ratio: 16 / 10; overflow: hidden; clip-path: var(--dd-clip-tile); background: var(--dd-bg-alt); }
@media (min-width: 52rem) { .dd-work-hero { aspect-ratio: 21 / 9; } }
.dd-work-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.9) brightness(.82); }
.dd-work-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 12, 13, .55)); }
/* Ligne « Prestation : … » de la fiche (m6) : traitement méta mono. */
.dd-work-presta { font-family: var(--dd-font-mono); font-size: var(--dd-fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--dd-text-muted); }
.dd-work-presta a { color: var(--dd-accent-bright); text-decoration: underline; text-underline-offset: 2px; }
/* Ligne de faille : filet FIN (2px) sur un ton de bordure, pas la couleur du
   texte — sinon barre blanc/noir pur qui lit comme un souligné de titre. La
   fissure oblique (::before) et le débris teal (::after) restent les accents. */
.dd-shead__rule { position: relative; height: 2px; background: var(--dd-border-strong); margin-top: 1.6rem; width: 12rem; max-width: 60%; }
.dd-shead__rule::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 64%; width: 10px; background: var(--dd-bg); transform: skewX(-24deg); }
.dd-shead__rule::after { content: ""; position: absolute; right: -1.4rem; top: 50%; margin-top: -.28rem; width: .55rem; height: .55rem; background: var(--dd-accent); transform: rotate(20deg); }
.dd-section--alt .dd-shead__rule::before { background: var(--dd-bg-alt); }
.dd-section--light .dd-shead h1,
.dd-section--light .dd-shead h2 { color: var(--dd-ink); }
.dd-section--light .dd-shead h1 em,
.dd-section--light .dd-shead h2 em { color: var(--dd-teal-ink); }
.dd-section--light .dd-shead__lede { color: var(--dd-text-soft-on-light); }
.dd-section--light .dd-shead__rule { background: var(--dd-border-light); }
.dd-section--light .dd-shead__rule::before { background: var(--dd-paper); }


/* 9. BOUTONS
   -------------------------------------------------------------------------- */

.dd-btn {
	--dd-chamfer: 14px;
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--dd-font-text); font-weight: 700; font-size: .9375rem; line-height: 1;
	text-transform: uppercase; letter-spacing: var(--dd-tracking-button);
	padding: 1.05rem 1.7rem; text-decoration: none; cursor: pointer; border: 0;
	clip-path: var(--dd-clip-btn);
	transition: transform var(--dd-dur-micro) var(--dd-ease-out),
	            background-color var(--dd-dur-micro) var(--dd-ease-out),
	            box-shadow var(--dd-dur-micro) var(--dd-ease-out), color var(--dd-dur-micro);
}
.dd-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.dd-btn--solid { background: var(--dd-accent); color: var(--dd-text-on-accent); }
.dd-btn--solid:hover { background: var(--dd-accent-hover); transform: translateY(-2px); box-shadow: var(--dd-glow-teal); }
.dd-btn--solid:active { transform: translateY(0); }
/* Filet porté par un calque de fond : le box-shadow inset était rogné par le
   clip-path aux deux coins chanfreinés → coins « ouverts ». z-index:0 sur le
   bouton confine le ::before (z-index:-1) : filet teal net = liseré de 2px
   tout autour, texte au-dessus. */
.dd-btn--line { position: relative; z-index: 0; background: var(--dd-border-accent); color: var(--dd-text); box-shadow: none; }
.dd-btn--line::before {
	content: ""; position: absolute; inset: 2px; z-index: -1;
	background: var(--dd-bg); clip-path: var(--dd-clip-btn);
}
.dd-btn--line:hover { background: var(--dd-accent-bright); color: #fff; transform: translateY(-2px); }
.dd-btn--line:hover::before { background: var(--dd-accent-wash); }
.dd-btn--compact { --dd-chamfer: 10px; padding: .7rem 1.05rem; font-size: .8125rem; }
.dd-btn:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }
.dd-btn:hover svg { transform: translateX(3px); transition: transform var(--dd-dur-micro); }
.dd-section--light .dd-btn--line { background: var(--dd-teal-ink); color: var(--dd-ink); box-shadow: none; }
.dd-section--light .dd-btn--line::before { background: var(--dd-paper); }
.dd-section--light .dd-btn--line:hover { background: var(--dd-teal-ink); color: #fff; }
.dd-section--light .dd-btn--line:hover::before { background: rgba(12, 95, 99, .12); }


/* 10. SECTION CLAIRE « ATELIER » ET ÉQUIPEMENTS
   -------------------------------------------------------------------------- */

.dd-atelier { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 64rem) { .dd-atelier { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.dd-atelier__text p { color: var(--dd-text-soft-on-light); font-size: var(--dd-fs-body-lg); max-width: 56ch; }
.dd-atelier__text p + p { margin-top: 1.1rem; }
.dd-equip { border-top: 2px solid var(--dd-ink); }
/* La maquette pose class="dd-equip__row" sur chaque <li> ; on couvre aussi le
   <li> nu pour rester robuste au markup de la Task 7. */
.dd-equip__row,
.dd-equip > li { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--dd-border-light); }
.dd-equip__name { font-family: var(--dd-font-mono); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dd-ink); white-space: nowrap; display: flex; align-items: center; }
.dd-equip__name::before { content: ""; width: .5em; height: .5em; margin-right: .7em; background: var(--dd-teal-ink); transform: rotate(18deg); flex: none; }
.dd-equip__detail { color: var(--dd-text-soft-on-light); font-size: .95rem; line-height: 1.5; }
/* Sous 40rem : le nom mono tracké (white-space:nowrap) figeait la 1re colonne
   à ~230px et écrasait le détail sur 3-4 lignes. On empile. */
@media (max-width: 40rem) {
	.dd-equip__row,
	.dd-equip > li { grid-template-columns: 1fr; gap: .15rem 0; }
	.dd-equip__name { white-space: normal; }
}


/* 11. PRESTATIONS
   --------------------------------------------------------------------------
   Portée depuis le <style> de la maquette (bloc « PRESTATIONS — grille B2 /
   skin D »). Cartes « service » : coin bas-droite coupé (--dd-clip-card),
   fragment triangulaire .dd-chip logé dans l'encoche, filet supérieur qui
   se déploie au survol.
   Note de portage : la maquette nomme l'icône .dd-presta__ico ; on gèle
   .dd-presta__pic (consommé par front-page.php, Tasks 8-9). */

.dd-presta-grid { display: grid; gap: var(--dd-col-gap); grid-template-columns: 1fr; }
/* Colonnes fixes plutôt qu'auto-fit : avec 9 cartes, auto-fit laissait la 9e
   seule et étirée entre ~40 et 64rem. */
@media (min-width: 40rem) { .dd-presta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .dd-presta-grid { grid-template-columns: repeat(3, 1fr); } }

.dd-presta {
	position: relative; display: flex; flex-direction: column; gap: .75rem; min-height: 13rem;
	padding: 1.5rem; text-decoration: none; color: inherit;
	background: var(--dd-surface); border: 1px solid var(--dd-border);
	clip-path: var(--dd-clip-card);
	transition: background-color var(--dd-dur-base) var(--dd-ease-out),
	            border-color var(--dd-dur-base) var(--dd-ease-out),
	            transform var(--dd-dur-base) var(--dd-ease-out);
}
.dd-presta::before {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
	background: var(--dd-accent); transform: scaleX(0); transform-origin: left;
	transition: transform var(--dd-dur-base) var(--dd-ease-squeegee);
}
.dd-chip {
	position: absolute; right: -1px; bottom: -1px; width: 20px; height: 20px; pointer-events: none;
	background: var(--dd-bg-alt); clip-path: var(--dd-clip-chip, polygon(100% 0, 100% 100%, 0 100%));
	transition: background-color var(--dd-dur-base) var(--dd-ease-out);
}
.dd-presta__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dd-presta__pic, .dd-presta__pic svg { width: 30px; height: 30px; color: var(--dd-accent-bright); flex: none; }
/* Numéro 01–09 : cœur de la grille, à mettre au poids du picto teal (avant :
   1,4rem gris, il chuchotait). Big Shoulders, --dd-text-soft. */
.dd-presta__num { font-family: var(--dd-font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 2.2vw, 2.75rem); line-height: 1; color: var(--dd-text-soft); letter-spacing: .02em; }
.dd-presta__name { font-family: var(--dd-font-text); font-weight: 700; font-size: 1.12rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: var(--dd-text); }
.dd-presta__sum { color: var(--dd-text-soft); font-size: .95rem; line-height: 1.5; flex: 1; }
.dd-presta__arrow { width: 22px; height: 22px; color: var(--dd-text-soft); align-self: flex-end; transition: transform var(--dd-dur-base) var(--dd-ease-out), color var(--dd-dur-base); }
.dd-presta:hover { background: var(--dd-surface-raised); border-color: var(--dd-accent); transform: translateY(-3px); }
.dd-presta:hover::before { transform: scaleX(1); }
.dd-presta:hover .dd-presta__arrow { transform: translateX(6px); color: var(--dd-accent-bright); }
.dd-presta:hover .dd-chip { background: var(--dd-accent); }
.dd-presta:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }


/* 12. RÉALISATIONS
   --------------------------------------------------------------------------
   Portée depuis le <style> de la maquette (bloc « RÉALISATIONS (D) »).
   Vignettes photo, coin haut-droite coupé (--dd-clip-tile) ; voile sombre +
   lueur teal en pied. L'équerre et le balayage ne s'activent que sous
   .dd-anim (portique JS + prefers-reduced-motion, géré en section 18). */

.dd-works { display: grid; grid-template-columns: 1fr; gap: var(--dd-col-gap); }
@media (min-width: 52rem) { .dd-works { grid-template-columns: repeat(2, 1fr); } }
/* Filet de sécurité : ancien conteneur de galerie. Plus rien ne l'émet dans ce
   thème (inc/template-tags.php sort .dd-works), mais un contenu ou un gabarit
   enfant qui l'utiliserait encore reste ainsi mis en grille au lieu d'empiler
   les tuiles sur toute la largeur. */
.dd-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--dd-col-gap); }
.dd-galerie__rangee { display: contents; }
.dd-work { position: relative; display: block; overflow: hidden; text-decoration: none; aspect-ratio: 4 / 3; background: var(--dd-bg-alt); clip-path: var(--dd-clip-tile); }
/* Tuile large en mobile : 16:10, pas 4:3 — les sujets larges (covering,
   devanture) perdaient leur cadrage. Repasse en 21:9 dès 52rem. */
.dd-work--wide { aspect-ratio: 16 / 10; }
@media (min-width: 52rem) { .dd-work--wide { grid-column: span 2; aspect-ratio: 21 / 9; } }
.dd-work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.9) brightness(.82); transition: transform var(--dd-dur-reveal) var(--dd-ease-out); }
.dd-work__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(10, 12, 13, .1) 28%, rgba(10, 12, 13, .88) 100%),
	            radial-gradient(120% 82% at 12% 100%, rgba(23, 162, 166, .3), transparent 60%);
}
.dd-work__cap { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem; z-index: 3; }
.dd-work__cat { display: block; margin-bottom: .35rem; font-family: var(--dd-font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dd-accent-bright); }
.dd-work__title { font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.dd-work__bracket {
	position: absolute; left: .8rem; top: .8rem; width: 26px; height: 26px; z-index: 3;
	border-left: 2px solid var(--dd-accent-bright); border-top: 2px solid var(--dd-accent-bright);
	opacity: 0; transform: translate(6px, 6px);
	transition: opacity var(--dd-dur-base), transform var(--dd-dur-base);
}
.dd-work:hover img { transform: scale(1.05); }
.dd-work:hover .dd-work__bracket { opacity: 1; transform: none; }
.dd-work:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }
.dd-works__foot { margin-top: clamp(2rem, 4vw, 3rem); }
.dd-anim .dd-work__sweep { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.dd-anim .dd-work__sweep::before {
	content: ""; position: absolute; top: -10%; bottom: -10%; width: 38%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
	transform: translateX(-180%) skewX(-12deg);
}
.dd-anim .dd-work:hover .dd-work__sweep::before { transform: translateX(340%) skewX(-12deg); transition: transform 700ms var(--dd-ease-squeegee); }

/* Barre de filtres de l'archive Réalisations : liens simples rendus par
   deriaz_barre_filtres() (inc/template-tags.php). Repris du gabarit de bouton
   .dd-btn--line ; l'entrée active (« est-actif » + aria-current) prend l'aplat
   teal. Placé ici faute de style hérité pour .dd-filtres / .dd-filtre. */
.dd-filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dd-filtre {
	display: inline-flex; align-items: center;
	--dd-chamfer: 8px;
	padding: .55rem .95rem;
	font-family: var(--dd-font-mono); font-size: .78rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
	color: var(--dd-text-soft); background: transparent;
	box-shadow: inset 0 0 0 1px var(--dd-border-accent);
	clip-path: var(--dd-clip-btn);
	transition: color var(--dd-dur-micro), background var(--dd-dur-micro), box-shadow var(--dd-dur-micro);
}
.dd-filtre:hover { color: #fff; background: var(--dd-accent-wash); box-shadow: inset 0 0 0 1px var(--dd-accent-bright); }
.dd-filtre.est-actif { color: var(--dd-text-on-accent); background: var(--dd-accent); box-shadow: inset 0 0 0 1px var(--dd-accent); }
.dd-filtre:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }


/* 13. ÉTAPES
   --------------------------------------------------------------------------
   Portée depuis le <style> de la maquette (bloc « ÉTAPES (D) »). Grille de
   1 → 4 colonnes, chaque étape sur --dd-surface, filet teal supérieur. */

.dd-steps { display: grid; grid-template-columns: 1fr; gap: var(--dd-col-gap); }
@media (min-width: 40rem) { .dd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .dd-steps { grid-template-columns: repeat(4, 1fr); } }
.dd-step { position: relative; padding: 1.7rem 1.4rem 1.6rem; background: var(--dd-surface); border-top: 2px solid var(--dd-accent); clip-path: var(--dd-clip-card); }
/* Resserré (avant : jusqu'à 5rem) pour rester frère du numéro de prestation. */
.dd-step__num { font-family: var(--dd-font-display); font-weight: 800; font-size: clamp(2.5rem, 1rem + 4vw, 3.5rem); line-height: 1; color: var(--dd-accent); }
.dd-step__t { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--dd-text); margin: .4rem 0 .5rem; font-size: 1.05rem; }
.dd-step__d { color: var(--dd-text-soft); font-size: .95rem; line-height: 1.55; }


/* 14. CONTACT
   --------------------------------------------------------------------------
   Portée depuis le <style> de la maquette (bloc « CONTACT (D) »). Deux
   colonnes : coordonnées + encart d'appel.
   Notes de portage : maquette .dd-contact__list → .dd-coord ;
   maquette .dd-contact__cta → .dd-callout, dont le fond passe à
   --dd-surface-raised (jeton « encart CTA », cf. brief Task 4). Le
   formulaire .dd-field* est en section 16. */

.dd-contact { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 64rem) { .dd-contact { grid-template-columns: 1fr 1fr; align-items: start; } }
.dd-coord { display: grid; gap: 1.1rem; margin-top: .5rem; }
.dd-coord li { display: flex; gap: 1rem; align-items: flex-start; }
.dd-coord svg { width: 26px; height: 26px; color: var(--dd-accent-bright); flex: none; }
.dd-coord b { display: block; font-family: var(--dd-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-text-muted); margin-bottom: .2rem; }
.dd-coord a { color: var(--dd-text); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; font-size: 1.05rem; }
.dd-coord a:hover { color: var(--dd-accent-bright); }
.dd-callout { background: var(--dd-surface-raised); border: 1px solid var(--dd-border); padding: clamp(1.8rem, 4vw, 3rem); clip-path: var(--dd-clip-tile); }
.dd-callout h3 { font-family: var(--dd-font-display); font-weight: 800; font-size: var(--dd-fs-h3); text-transform: uppercase; line-height: 1; color: var(--dd-text); margin-bottom: 1rem; }
.dd-callout p { color: var(--dd-text-soft); margin-bottom: 1.6rem; max-width: 40ch; }

/* Modificateur posé par page-contact.php (« dd-contact dd-contact--page »)
   tant que Task 12 n'a pas réécrit ce gabarit : colonnes coordonnées +
   formulaire à parts égales, qui se replient sous ~280px. */
.dd-contact--page { margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }


/* 15. CONTENU ÉDITORIAL  (.dd-prose)
   --------------------------------------------------------------------------
   Habillage de ce que produit l'éditeur de WordPress — the_content() sur les
   gabarits internes (page.php, page-prestation.php, single-realisation.php,
   page-contact.php). On habille les balises directement : le client n'a
   aucune classe à poser. Jetons --dd-* vivants uniquement. */

/* Longueur de ligne bridée comme partout ailleurs sur le site (l'accueil
   plafonne tout à 52–56ch). Les médias larges s'en affranchissent. */
.dd-prose { max-width: 68ch; }
.dd-prose .wp-block-gallery,
.dd-prose .wp-block-image.alignwide,
.dd-prose .wp-block-image.alignfull,
.dd-prose .alignwide,
.dd-prose .alignfull { max-width: none; }
.dd-prose > * + * { margin-top: 1.4em; }
.dd-prose p,
.dd-prose li { color: var(--dd-text-soft); font-size: var(--dd-fs-body); line-height: var(--dd-lh-body); }

.dd-prose h2,
.dd-prose h3 {
	font-family: var(--dd-font-text);
	font-weight: 700;
	color: var(--dd-text);
	text-transform: none;
	line-height: 1.2;
	margin-top: 1.8em;
}
.dd-prose h2 { font-size: clamp(1.5rem, 1rem + 2.2vw, 2rem); }
.dd-prose h3 { font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.5rem); }

.dd-prose strong { color: var(--dd-text); }
.dd-prose a { color: var(--dd-accent-bright); text-decoration: underline; }

.dd-prose ul,
.dd-prose ol { padding-left: 1.4em; }

.dd-prose blockquote {
	margin: 0;
	border-left: 2px solid var(--dd-accent);
	padding-left: 1rem;
	color: var(--dd-text);
}

.dd-prose img,
.dd-prose .wp-block-image img { clip-path: var(--dd-clip-tile); }

/* WordPress rend la galerie en is-layout-flex is-cropped ; on force la grille
   du thème par-dessus, avec recadrage à hauteur égale (le flex du cœur
   laissait des rangées inégales). */
.dd-prose .wp-block-gallery {
	display: grid;
	gap: var(--dd-col-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.dd-prose .wp-block-gallery .wp-block-image,
.dd-prose .wp-block-gallery figure { margin: 0; width: 100%; }
.dd-prose .wp-block-gallery img {
	width: 100%; height: 100%; object-fit: cover;
	aspect-ratio: 4 / 3; clip-path: var(--dd-clip-tile);
}

.dd-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-family: var(--dd-font-mono);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dd-text-muted);
}
.dd-pagination .page-numbers { padding: 8px 12px; }
.dd-pagination .current { color: var(--dd-accent-bright); }


/* 16. FORMULAIRE DE CONTACT
   --------------------------------------------------------------------------
   Remplace l'ancienne section « 13 ter ». Habille le markup RÉEL rendu par
   inc/formulaire-contact.php (fichier intouchable, spec §5.3) : .dd-formulaire,
   .dd-champ*, .dd-pot-de-miel, .dd-message*, et le bouton d'envoi
   .dd-bouton--plein. L'intention visuelle est celle décrite au brief pour le
   formulaire (champs sur --dd-surface-sunken, étiquettes mono, focus teal,
   erreurs rouges, bouton plein calqué sur .dd-btn--solid), portée sur des
   jetons --dd-* vivants.
   Le bloc .dd-field* (markup de la maquette, non émis à ce jour) est conservé
   plus bas : inoffensif, prêt pour les gabarits de Task 12. */

/* Pot de miel : hors de l'œil mais laissé dans le flux (un display:none se
   repère). CRITIQUE — sans cette règle le champ « Ne pas remplir » est visible. */
.dd-pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Une colonne sur téléphone, deux dès 40rem : nom/courriel puis
   téléphone/prestation se rangent deux par deux, et .dd-champ--large (le
   message, posé par inc/formulaire-contact.php) traverse les deux colonnes.
   Le pot de miel est sorti du flux, il ne consomme aucune cellule. */
.dd-formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-top: 1.4rem; }
@media (min-width: 40rem) {
	.dd-formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dd-champ--large,
	.dd-formulaire__pied { grid-column: 1 / -1; }
}

.dd-champ { display: flex; flex-direction: column; gap: .4rem; margin: 0; }

.dd-champ__label {
	font-family: var(--dd-font-mono); font-weight: 600; font-size: var(--dd-fs-meta);
	letter-spacing: var(--dd-tracking-kicker); text-transform: uppercase; color: var(--dd-text-soft);
}
.dd-champ__requis { color: var(--dd-accent-bright); }

.dd-champ__saisie {
	width: 100%; font: inherit; color: var(--dd-text);
	background: var(--dd-surface-sunken);
	border: 1px solid var(--dd-border-strong); border-bottom-width: 2px;
	border-radius: var(--dd-radius); padding: .8rem .9rem;
	transition: border-color var(--dd-dur-micro), box-shadow var(--dd-dur-micro);
}
.dd-champ__saisie::placeholder { color: var(--dd-placeholder); }
.dd-champ__saisie:focus { border-color: var(--dd-accent-bright); box-shadow: 0 0 0 3px rgba(79, 216, 220, .45); }
.dd-champ__saisie:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; }
/* Le PHP appose « est-en-erreur » sur le champ lui-même ; on couvre aussi un
   éventuel parent .dd-champ--erreur. */
.dd-champ__saisie.est-en-erreur,
.dd-champ--erreur .dd-champ__saisie { border-color: var(--dd-error); }

textarea.dd-champ__saisie { min-height: 140px; resize: vertical; }

/* Menu déroulant : on retire l'habillage système et on redessine le chevron
   en CSS pur (deux dégradés en biseau, cale sur --dd-text-soft). */
select.dd-champ__saisie {
	appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--dd-text-soft) 50%),
	                  linear-gradient(135deg, var(--dd-text-soft) 50%, transparent 50%);
	background-position: calc(100% - 1rem) calc(50% + 1px), calc(100% - .7rem) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select.dd-champ__saisie option { background: var(--dd-bg-alt); color: var(--dd-text); }

.dd-champ__erreur { font-family: var(--dd-font-mono); font-size: var(--dd-fs-meta); letter-spacing: .02em; color: var(--dd-error-text); }

.dd-formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: .4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--dd-border); }
/* --dd-text-soft et non --dd-text-muted : cette mention se lit sur le fond
   clairci de l'encart (.dd-callout, --dd-surface-raised), où le gris sourd ne
   donnait que 4,1:1 — sous le seuil AA. Le gris doux y monte à 7,2:1. */
.dd-formulaire__mention { flex: 1 1 220px; font-size: var(--dd-fs-meta); line-height: 1.5; color: var(--dd-text-soft); }

/* Messages de confirmation / erreur, posés par le PHP juste avant le <form>. */
.dd-message { margin: 0 0 1.2rem; padding: .9rem 1.1rem; background: var(--dd-surface); border-left: 3px solid; font-size: var(--dd-fs-meta); line-height: 1.5; }
.dd-message--succes { border-left-color: var(--dd-success); color: var(--dd-success-text); }
.dd-message--erreur { border-left-color: var(--dd-error); color: var(--dd-error-text); }

/* Bouton d'envoi : <button class="dd-bouton dd-bouton--plein">. Même aspect
   que .dd-btn--solid (section 9), décliné sur la classe du markup réel et
   borné au formulaire (la réconciliation .dd-bouton / .dd-btn du reste du
   site relève des Tasks 8-9). */
.dd-formulaire .dd-bouton--plein {
	--dd-chamfer: 14px;
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--dd-font-text); font-weight: 700; font-size: .9375rem; line-height: 1;
	text-transform: uppercase; letter-spacing: var(--dd-tracking-button);
	padding: 1.05rem 1.7rem; border: 0; cursor: pointer;
	background: var(--dd-accent); color: var(--dd-text-on-accent);
	clip-path: var(--dd-clip-btn);
	transition: transform var(--dd-dur-micro) var(--dd-ease-out),
	            background-color var(--dd-dur-micro) var(--dd-ease-out),
	            box-shadow var(--dd-dur-micro) var(--dd-ease-out);
}
.dd-formulaire .dd-bouton--plein:hover { background: var(--dd-accent-hover); transform: translateY(-2px); box-shadow: var(--dd-glow-teal); }
.dd-formulaire .dd-bouton--plein:active { transform: translateY(0); }
.dd-formulaire .dd-bouton--plein:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 3px; clip-path: none; }

/* --- .dd-field* : markup de la maquette, pas encore émis (prêt Task 12) --- */
.dd-form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.dd-field { display: flex; flex-direction: column; gap: .5rem; }
.dd-field__label, .dd-field label {
	font-family: var(--dd-font-mono); font-weight: 600; font-size: var(--dd-fs-kicker);
	letter-spacing: .14em; text-transform: uppercase; color: var(--dd-text-soft);
}
.dd-field input, .dd-field textarea {
	font: inherit; color: var(--dd-text);
	background: var(--dd-surface-sunken);
	border: 1px solid var(--dd-border-strong); border-bottom-width: 2px;
	border-radius: var(--dd-radius); padding: .9rem 1rem;
	transition: border-color var(--dd-dur-micro), box-shadow var(--dd-dur-micro);
}
.dd-field textarea { min-height: 120px; resize: vertical; }
.dd-field input::placeholder, .dd-field textarea::placeholder { color: var(--dd-placeholder); }
.dd-field input:focus, .dd-field textarea:focus { outline: none; border-color: var(--dd-accent-bright); box-shadow: 0 0 0 3px rgba(79, 216, 220, .2); }
.dd-field--error, .dd-field--error .dd-field__label, .dd-field--error label { color: var(--dd-error); }
.dd-field--error input, .dd-field--error textarea { border-color: var(--dd-error); }


/* 17. PIED DE PAGE
   --------------------------------------------------------------------------
   Remplace l'ancienne section « 14 ». Portée depuis le <style> de la
   maquette (bloc « PIED (D) »). Liseré supérieur en zigzag découpé
   (::before, --dd-accent-deep), grille de blocs, barre légale monospace. */

.dd-footer { position: relative; background: var(--dd-bg); border-top: 1px solid var(--dd-border); padding: var(--dd-section-y) 0 2rem; }
.dd-footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px;
	background: var(--dd-accent); opacity: .85;
	clip-path: polygon(0 0, 4% 100%, 9% 20%, 15% 90%, 21% 10%, 28% 80%, 35% 25%, 43% 95%,
	           51% 15%, 60% 85%, 69% 20%, 78% 92%, 87% 10%, 95% 82%, 100% 25%, 100% 0);
}
.dd-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dd-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .dd-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Titres de colonne : footer.php les sort en <h3> (le <h1> de la page est
   ailleurs, on ne saute donc aucun niveau). */
.dd-footer h2 { font-family: var(--dd-font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-text-muted); margin-bottom: 1rem; }
.dd-footer ul { display: grid; gap: .55rem; list-style: none; padding: 0; }
.dd-footer a { color: var(--dd-text-soft); text-decoration: none; font-size: .95rem; }
.dd-footer a:hover { color: var(--dd-accent-bright); }
.dd-footer__brand p { color: var(--dd-text-soft); font-size: .95rem; margin-top: 1rem; max-width: 34ch; }
.dd-footer__bar {
	margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--dd-border);
	font-family: var(--dd-font-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--dd-text-muted); display: flex; flex-wrap: wrap; gap: .4rem 1rem;
}
.dd-footer__bar .dot { color: var(--dd-accent); }


/* 18. ANIMATIONS ET ACCESSIBILITÉ
   --------------------------------------------------------------------------
   Portée depuis la maquette « Vitrine + Éclats ». Consomme #dd-shard-mini /
   #dd-shard-field / #dd-seam-shard et les jetons de durée/easing (section 1). */

/* --- Motif éclats : base --- */
.dd-shards { position: absolute; pointer-events: none; opacity: .6; mix-blend-mode: screen; z-index: 0; }

/* --- Rappels d'éclats — sections sombres uniquement (ajustement spec §2.1.4) --- */
.dd-section--echo { overflow: clip; }
.dd-section--echo > .dd-wrap { position: relative; z-index: 1; }
.dd-shards--echo { opacity: .3; width: clamp(90px, 12vw, 168px); mix-blend-mode: screen; }
.dd-shards--tr { top: -14px; right: -6px; }
.dd-shards--bl { left: -10px; bottom: -16px; }
@media (max-width: 40rem) { .dd-shards--echo { width: 96px; opacity: .24; } }

/* --- Éclats teal le long de la couture sombre ↔ claire.
   Posé sur la ligne de couture, en haut de .dd-section--light (position:relative).
   Le symbole #dd-seam-shard porte déjà les 3 éclats ; hérite .dd-shards
   (opacity:.6 ; mix-blend-mode:screen). Markup ajouté en Task 7. --- */
.dd-shards--seam {
	position: absolute; left: 50%; transform: translateX(-50%);
	top: -13px; width: clamp(120px, 20vw, 220px);
	z-index: 2; pointer-events: none;
}

/* --- Révélation « raclette » — seulement sous html.dd-anim.
   Sans .dd-anim (JS absent ou reduced-motion), [data-reveal] reste pleinement
   visible : aucune règle masquante hors de html.dd-anim. --- */
html.dd-anim [data-reveal] { clip-path: inset(0 100% 0 0); transform: translateY(18px); opacity: 0; }
html.dd-anim [data-reveal].is-in {
	clip-path: inset(0); transform: none; opacity: 1;
	transition: clip-path var(--dd-dur-reveal) var(--dd-ease-squeegee),
	            transform var(--dd-dur-reveal) var(--dd-ease-out),
	            opacity var(--dd-dur-reveal);
}

/* --- Allumage d'enseigne — one-shot (jamais en boucle) --- */
@keyframes dd-sign { 0% { opacity: .1; } 55% { opacity: .55; } 62% { opacity: .2; } 100% { opacity: 1; } }
html.dd-anim .dd-hero__line--accent::after { animation: dd-sign var(--dd-dur-sign) var(--dd-ease-out) both; }

/* --- Respect du réglage système « réduire les animations » --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { clip-path: none !important; transform: none !important; opacity: 1 !important; }
}