/* ==========================================================================
   Dream Studio — socle : polices, jetons de design, remise à zéro
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices hébergées localement (aucun appel à un tiers)
   Archivo est une police variable : un seul fichier couvre 400 à 600.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../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: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-serif-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;
}

/* --------------------------------------------------------------------------
   Jetons de design
   -------------------------------------------------------------------------- */

:root {
	/* Couleurs */
	--ds-fond:         #FAF8F5;  /* blanc cassé chaud */
	--ds-encre:        #1A1917;
	--ds-encre-douce:  #55524C;
	--ds-gris:         #6E6A63;
	--ds-gris-clair:   #A8A29A;
	--ds-filet:        #E4DFD7;
	--ds-filet-fort:   #C9C4BB;
	--ds-rouge:        #C8302F;  /* échantillonné sur le logo de l'agence */
	--ds-rouge-sombre: #A62523;
	--ds-rouge-profond:#8E2220;

	/* Typographie */
	--ds-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--ds-sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Mesures */
	--ds-header-h:  96px;
	--ds-gouttiere: 72px;
	--ds-logo-h:    48px;
	--ds-header-h-compact: 72px;  /* header une fois la page défilée (voir header.js) */
	--ds-logo-h-compact:   38px;

	/* Mouvement */
	--ds-sortie: cubic-bezier(.16, 1, .3, 1);
	--ds-duree:  .25s;
}

@media (max-width: 1099px) {
	:root {
		--ds-header-h:  88px;
		--ds-gouttiere: 48px;
		--ds-logo-h:    43px;
		--ds-header-h-compact: 68px;
		--ds-logo-h-compact:   35px;
	}
}

@media (max-width: 767px) {
	:root {
		--ds-header-h:  64px;
		--ds-gouttiere: 20px;
		--ds-logo-h:    34px;
		--ds-header-h-compact: 56px;
		--ds-logo-h-compact:   28px;
	}
}

/* --------------------------------------------------------------------------
   Remise à zéro
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Pas d'effet élastique en haut ni en bas de page : insister au sommet ne fait plus apparaître de blanc
	   sous le hero (et n'entraîne plus l'actualisation par tirage sur mobile). */
	overscroll-behavior-y: none;
}

body {
	margin: 0;
	background: var(--ds-fond);
	color: var(--ds-encre);
	font-family: var(--ds-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */

/* Anneau de focus visible uniquement au clavier, jamais masqué. */
:focus-visible {
	outline: 2px solid var(--ds-rouge);
	outline-offset: 3px;
}

.ds-skip {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--ds-encre);
	color: #fff;
	font-size: 14px;
	transition: top var(--ds-duree) var(--ds-sortie);
}

.ds-skip:focus { top: 8px; }

/* Masque visuel, reste lisible par les lecteurs d'écran. */
.ds-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mouvement réduit : on coupe tout
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   PROVISOIRE — mise en page des pages sans gabarit dédié
   Domaine d'expertise dispose maintenant de sa propre feuille.
   -------------------------------------------------------------------------- */

.ds-page {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(48px, 8vw, 96px) var(--ds-gouttiere);
}

.ds-page__titre {
	font-family: var(--ds-serif);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 68px);
	line-height: 1.06;
	letter-spacing: -.01em;
	margin-bottom: 24px;
}

.ds-page__corps {
	color: var(--ds-encre-douce);
	font-size: 17px;
}

.ds-page__corps > * + * { margin-top: 1.1em; }
.ds-page__corps a { color: var(--ds-rouge); text-decoration: underline; text-underline-offset: 3px; }

.ds-footer {
	border-top: 1px solid var(--ds-filet);
}

.ds-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 28px var(--ds-gouttiere);
	font-size: 14px;
	color: var(--ds-gris);
}

/* Coordonnées et mention du développeur : deux lignes serrées à gauche ; les icônes de
   réseaux, à droite, sont centrées verticalement sur l'ensemble des deux lignes. */
.ds-footer__texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ds-footer__credit {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--ds-gris);
}

.ds-footer__credit span,
.ds-footer__credit a { color: var(--ds-encre-douce); }

.ds-footer__credit a {
	text-decoration: underline;
	text-decoration-color: var(--ds-filet-fort);
	text-underline-offset: 3px;
	transition: color var(--ds-duree) var(--ds-sortie);
}

.ds-footer__credit a:hover { color: var(--ds-rouge); text-decoration-color: currentColor; }

/* Bouton contour sur fond sombre ou photo : filet blanc, texte + flèche ↗, qui se remplit au survol.
   Partagé par le hero de l'accueil et l'appel à l'action de Domaine d'expertise. */
.ds-bouton-contour {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 36px;
	border: 1px solid rgba(255, 255, 255, .75);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	transition: background .2s, color .2s, gap .2s, border-color .2s;
}

.ds-bouton-contour:hover,
.ds-bouton-contour:focus-visible {
	gap: 18px;
	border-color: #fff;
	background: #fff;
	color: var(--ds-encre);
}

/* Variante pleine : fond rouge de l'agence (bouton principal). */
.ds-bouton-contour--rouge { border-color: var(--ds-rouge); background: var(--ds-rouge); }

.ds-bouton-contour--rouge:hover,
.ds-bouton-contour--rouge:focus-visible {
	border-color: var(--ds-rouge-sombre);
	background: var(--ds-rouge-sombre);
	color: #fff;
}