/*
Theme Name: Atlas Automations
Theme URI: https://theatlasautomations.com
Author: Atlas Commerce Online Limited
Description: Custom theme for Atlas Automations — integration and automation services, ready-made connectors and automation kits. Dual pricing in EUR and SEK with real two-currency checkout, legal documents generated from a single source.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: atl
*/

/* =========================================================================
   1. Jetons
   -------------------------------------------------------------------------
   Parti pris : le papier plutôt que l'écran noir.
   Quatre sites existent déjà dans cette famille de projets et trois d'entre
   eux sont sombres. Un fond clair, une encre dense et une seule couleur
   d'accent donnent immédiatement autre chose — et conviennent mieux à un
   public de dirigeants et de comptables qu'à un public de développeurs.

   La grammaire visuelle est cartographique : courbes de niveau, repères de
   coordonnées, filets fins. Atlas veut dire recueil de cartes, et une carte
   est exactement ce que fait ce métier : représenter où les données vont.
   ========================================================================= */

:root {
	--papier:     #f5f2ec;
	--papier-2:   #ffffff;
	--papier-3:   #ece7dd;
	--encre:      #14171c;
	--encre-2:    #444c57;
	--encre-3:    #7c8592;

	--trait:      #ddd6c8;
	--trait-fort: #c3baa8;

	--accent:     #b8420f;
	--accent-clair: #e8612a;
	--second:     #0d5f5a;

	/*
	 * Piles système, par choix et pas par défaut.
	 *
	 * La politique cookies affirme que ce site ne charge aucune ressource
	 * tierce. Appeler fonts.googleapis.com rendrait cette phrase fausse et
	 * enverrait l'adresse IP de chaque visiteur hors de l'Union européenne.
	 * Héberger les fichiers soi-même serait correct aussi, mais suppose que
	 * quelqu'un les dépose et ne les oublie pas — et un site qui attend un
	 * fichier absent s'affiche mal sans prévenir.
	 *
	 * Les piles ci-dessous rendent le même dessin sur chaque système : ce
	 * qui porte l'identité ici, ce sont l'interlettrage serré, les graisses
	 * et la grille, pas le nom de la fonte.
	 *
	 * Le premier nom de chaque pile reste celui de la fonte d'origine : il
	 * suffit de déposer les .woff2 dans assets/fonts/ pour que le thème les
	 * prenne, sans toucher à cette feuille.
	 */
	--display: "Archivo", ui-sans-serif, "Segoe UI Variable Display", "Segoe UI",
	           -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--corps:   "Libre Franklin", ui-sans-serif, -apple-system, BlinkMacSystemFont,
	           "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
	           Consolas, "Liberation Mono", monospace;

	--large: 1340px;
	--etroit: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--corps);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 700;
	/* Resserré : les fontes système sont plus larges qu'Archivo. */
	letter-spacing: -0.04em;
	font-feature-settings: "kern" 1, "liga" 1;
	line-height: 1.02;
	margin: 0 0 20px;
	text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.6vw, 96px); }
h2 { font-size: clamp(30px, 4vw, 56px); }
h3 { font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -0.02em; }
p  { margin: 0 0 18px; }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.atl-shell  { max-width: var(--large);  margin-inline: auto; padding-inline: clamp(20px, 5vw, 60px); }
.atl-etroit { max-width: var(--etroit); }
.atl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Repère de section, dans l'esprit des coordonnées d'une carte. */
.atl-repere {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--encre-3);
	margin-bottom: 22px;
}
.atl-repere::before {
	content: ""; width: 26px; height: 1px; background: var(--accent);
}
.atl-lead { font-size: clamp(17px, 1.45vw, 20px); color: var(--encre-2); max-width: 64ch; }

.atl-section { padding-block: clamp(74px, 9vw, 132px); position: relative; }
.atl-section--trait { border-top: 1px solid var(--trait); }
.atl-section--blanc { background: var(--papier-2); }
.atl-section--encre { background: var(--encre); color: var(--papier); }
.atl-section--encre h2 { color: var(--papier); }
.atl-section--encre .atl-lead { color: rgba(245, 242, 236, .72); }
.atl-section--encre .atl-repere { color: rgba(245, 242, 236, .55); }

.atl-entete { max-width: 74ch; margin-bottom: clamp(38px, 5vw, 66px); }

/* =========================================================================
   2. Boutons
   ========================================================================= */

.atl-btn {
	display: inline-flex; align-items: center; gap: 11px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; text-decoration: none;
	padding: 17px 30px; border: 1px solid var(--encre); cursor: pointer;
	background: var(--encre); color: var(--papier);
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.atl-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.atl-btn--vide { background: transparent; color: var(--encre); }
.atl-btn--vide:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.atl-btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.atl-btn--accent:hover { background: var(--encre); border-color: var(--encre); }

.atl-lien {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--encre); text-decoration: none;
	border-bottom: 1px solid var(--trait-fort); padding-bottom: 6px;
}
.atl-lien:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================================================
   3. En-tête
   ========================================================================= */

.atl-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(245, 242, 236, .9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--trait);
}
.atl-header__int {
	max-width: var(--large); margin-inline: auto;
	padding: 14px clamp(20px, 5vw, 60px);
	display: flex; align-items: center; gap: clamp(14px, 2.6vw, 36px);
}
.atl-marque { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.atl-marque__signe { width: 40px; height: 40px; flex: none; }
.atl-marque__nom {
	font-family: var(--display); font-weight: 700; font-size: 17px;
	letter-spacing: -0.03em; color: var(--encre); line-height: 1.1;
}
.atl-marque__sous {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--encre-3);
}

.atl-nav ul { display: flex; gap: clamp(13px, 1.8vw, 28px); list-style: none; margin: 0; padding: 0; }
.atl-nav a { font-size: 14.5px; color: var(--encre-2); text-decoration: none; }
.atl-nav a:hover { color: var(--accent); }
@media (max-width: 980px) { .atl-nav { display: none; } }

.atl-devise { display: inline-flex; border: 1px solid var(--trait-fort); }
.atl-devise__choix {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
	padding: 9px 14px; text-decoration: none; color: var(--encre-3);
	border-right: 1px solid var(--trait-fort);
}
.atl-devise__choix:last-child { border-right: 0; }
.atl-devise__choix--actif { background: var(--encre); color: var(--papier); }
.atl-devise__choix:hover { color: var(--accent); }
.atl-devise__choix--actif:hover { color: var(--papier); }

.atl-panier {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
	padding: 9px 15px; border: 1px solid var(--trait-fort);
	color: var(--encre-2); text-decoration: none;
}
.atl-panier__compte {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 19px; height: 19px; padding: 0 5px;
	background: var(--accent); color: #fff; font-size: 10.5px;
}

/* =========================================================================
   4. Hero
   ========================================================================= */

.atl-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--trait); }
.atl-hero__fond { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.atl-hero__fond svg { width: 100%; height: 100%; display: block; }
.atl-hero__int { position: relative; z-index: 1; padding-block: clamp(72px, 10vw, 150px) clamp(56px, 7vw, 110px); }

.atl-hero h1 { max-width: 16ch; }
.atl-hero h1 em { font-style: normal; color: var(--accent); }
.atl-hero__accroche { font-size: clamp(17px, 1.55vw, 21px); color: var(--encre-2); max-width: 56ch; margin-top: 28px; }
.atl-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 38px; }
.atl-hero__note { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }

/* Bande de chiffres sous le hero. */
.atl-chiffres {
	display: grid; gap: 1px; background: var(--trait);
	border-top: 1px solid var(--trait);
}
@media (min-width: 700px)  { .atl-chiffres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .atl-chiffres { grid-template-columns: repeat(4, 1fr); } }
.atl-chiffre { background: var(--papier); padding: 26px clamp(20px, 3vw, 34px); }
.atl-chiffre__val {
	font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px);
	letter-spacing: -0.04em; display: block; line-height: 1;
}
.atl-chiffre__lib {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--encre-3); margin-top: 10px; display: block;
}

/* =========================================================================
   5. Bandeau défilant
   ========================================================================= */

.atl-bandeau { border-block: 1px solid var(--trait); padding-block: 18px; overflow: hidden; background: var(--papier-2); }
.atl-bandeau__piste { display: flex; gap: 42px; white-space: nowrap; animation: atl-defile 46s linear infinite; }
.atl-bandeau span {
	font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--encre-3);
	display: inline-flex; align-items: center; gap: 42px;
}
.atl-bandeau span::after { content: ""; width: 5px; height: 5px; background: var(--accent); }
@keyframes atl-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .atl-bandeau__piste { animation: none; } }

/* =========================================================================
   6. Prix doubles
   ========================================================================= */

.atl-prix { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.atl-prix__note {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--encre-3);
}
.atl-prix__principal {
	font-family: var(--display); font-weight: 700;
	font-size: clamp(27px, 2.9vw, 38px); letter-spacing: -0.045em;
	color: var(--encre); line-height: 1;
}
.atl-prix__second {
	font-family: var(--mono); font-size: clamp(13px, 1.15vw, 15px);
	color: var(--second); padding: 4px 9px; border: 1px solid rgba(13, 95, 90, .32);
	white-space: nowrap;
}
.atl-prix--ligne .atl-prix__principal { font-size: clamp(21px, 2vw, 27px); }

/* Barre de devise. */
.atl-barre-devise {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	padding: 17px 22px; margin-bottom: 28px;
	border: 1px solid var(--trait-fort); background: var(--papier-2);
}
.atl-barre-devise__texte { font-size: 14.5px; color: var(--encre-2); }
.atl-barre-devise__texte strong { color: var(--encre); font-weight: 600; }
.atl-barre-devise__choix { display: flex; gap: 8px; }
.atl-bascule {
	display: flex; flex-direction: column; gap: 1px;
	padding: 9px 18px; text-decoration: none;
	border: 1px solid var(--trait-fort); background: var(--papier);
	color: var(--encre-3);
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.atl-bascule__code { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; font-weight: 500; }
.atl-bascule__nom  { font-size: 10.5px; opacity: .85; }
.atl-bascule:hover { color: var(--accent); border-color: var(--accent); }
.atl-bascule--actif { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.atl-bascule--actif:hover { color: var(--papier); }

/* =========================================================================
   7. Cartes
   ========================================================================= */

.atl-grille { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
@media (min-width: 740px)  { .atl-grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 740px)  { .atl-grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .atl-grille--3 { grid-template-columns: repeat(3, 1fr); } }

.atl-carte {
	background: var(--papier-2); padding: clamp(24px, 2.8vw, 36px);
	display: flex; flex-direction: column; gap: 15px;
	position: relative; transition: background .18s ease;
}
.atl-carte:hover { background: var(--papier); }
.atl-carte__etiquette {
	font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--encre-3);
	border: 1px solid var(--trait-fort); padding: 5px 11px; align-self: flex-start;
}
.atl-carte__etiquette--demande { color: var(--accent); border-color: rgba(184, 66, 15, .4); }
.atl-carte h3 { margin: 0; }
.atl-carte h3 a { color: inherit; text-decoration: none; }
.atl-carte h3 a:hover { color: var(--accent); }
.atl-carte__resume { margin: 0; font-size: 15.5px; color: var(--encre-2); }
.atl-carte__liste { margin: 0; padding: 17px 0 0; border-top: 1px solid var(--trait); list-style: none; display: grid; gap: 9px; }
.atl-carte__liste li { position: relative; padding-left: 21px; font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.atl-carte__liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 1px; background: var(--accent); }
.atl-carte__pied { margin-top: auto; padding-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.atl-famille {
	display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
	margin: 52px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--trait-fort);
}
.atl-famille:first-of-type { margin-top: 0; }
.atl-famille h3 { margin: 0; font-size: clamp(19px, 2vw, 26px); }
.atl-famille__num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.atl-famille p { margin: 0; font-size: 14.5px; color: var(--encre-3); flex: 1 1 30ch; }

/* =========================================================================
   8. Schéma de flux
   ========================================================================= */

.atl-flux { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
@media (min-width: 900px) { .atl-flux { grid-template-columns: repeat(3, 1fr); } }
.atl-flux__cas { background: var(--papier-2); padding: clamp(24px, 3vw, 36px); }
.atl-flux__schema { margin: 20px 0; }
.atl-flux__schema svg { width: 100%; height: auto; display: block; }
.atl-flux h3 { font-size: 19px; margin-bottom: 10px; }
.atl-flux p { margin: 0; font-size: 14.5px; color: var(--encre-2); }
.atl-flux__gain {
	margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait);
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--accent);
}

/* =========================================================================
   9. Étapes
   ========================================================================= */

.atl-etapes { display: grid; gap: 1px; background: rgba(245,242,236,.14); border: 1px solid rgba(245,242,236,.14); }
@media (min-width: 900px) { .atl-etapes { grid-template-columns: repeat(4, 1fr); } }
.atl-etape { background: var(--encre); padding: clamp(24px, 2.6vw, 34px); }
.atl-etape__num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--accent-clair); display: block; margin-bottom: 16px; }
.atl-etape h3 { font-size: 18px; margin-bottom: 10px; color: var(--papier); }
.atl-etape p { margin: 0; font-size: 14.5px; color: rgba(245, 242, 236, .68); }

/* =========================================================================
   10. FAQ
   ========================================================================= */

.atl-faq { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.atl-faq details { background: var(--papier-2); }
.atl-faq details[open] { background: var(--papier); }
.atl-faq summary {
	cursor: pointer; list-style: none; padding: 22px clamp(20px, 3vw, 30px);
	font-family: var(--display); font-weight: 700; font-size: 17.5px; letter-spacing: -0.02em;
	display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.atl-faq summary::-webkit-details-marker { display: none; }
.atl-faq summary::after { content: "+"; font-family: var(--mono); font-size: 19px; color: var(--accent); flex: none; }
.atl-faq details[open] summary::after { content: "–"; }
.atl-faq__corps { padding: 0 clamp(20px, 3vw, 30px) 26px; color: var(--encre-2); font-size: 15.5px; max-width: 80ch; }
.atl-faq__corps p { margin: 0 0 14px; }
.atl-faq__corps p:last-child { margin: 0; }

/* =========================================================================
   11. Formulaire
   ========================================================================= */

.atl-form { max-width: 900px; }
.atl-form__grille { display: grid; gap: 20px; }
@media (min-width: 720px) { .atl-form__grille { grid-template-columns: 1fr 1fr; } }
.atl-champ { display: flex; flex-direction: column; gap: 8px; }
.atl-champ--large { grid-column: 1 / -1; }
.atl-champ label {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--encre-3);
}
.atl-champ label .requis { color: var(--accent); }
.atl-champ input, .atl-champ select, .atl-champ textarea {
	width: 100%; padding: 15px 17px;
	background: var(--papier-2); color: var(--encre);
	border: 1px solid var(--trait-fort);
	font-family: var(--corps); font-size: 16px; line-height: 1.5;
	transition: border-color .16s ease, box-shadow .16s ease;
	appearance: none;
}
.atl-champ textarea { resize: vertical; min-height: 150px; }
.atl-champ select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c8592' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
	padding-right: 44px; cursor: pointer;
}
.atl-champ input:focus, .atl-champ select:focus, .atl-champ textarea:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 66, 15, .14);
}
.atl-champ__aide { font-size: 13px; color: var(--encre-3); line-height: 1.5; }
.atl-form__pied { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--trait); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.atl-form__note { font-size: 13px; color: var(--encre-3); max-width: 54ch; line-height: 1.6; margin: 0; }
.atl-form__etat { margin: 0 0 26px; padding: 15px 19px; border-left: 2px solid var(--second); background: var(--papier-2); font-size: 15px; }
.atl-form__etat--erreur { border-left-color: var(--accent); }

/* =========================================================================
   12. Pied de page
   ========================================================================= */

.atl-footer { border-top: 1px solid var(--trait); background: var(--papier-2); padding-block: clamp(56px, 7vw, 92px) 40px; }
.atl-footer__haut { display: grid; gap: 44px; }
@media (min-width: 900px) { .atl-footer__haut { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.atl-footer h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 18px; }
.atl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atl-footer a { color: var(--encre-2); text-decoration: none; font-size: 14.5px; }
.atl-footer a:hover { color: var(--accent); }
.atl-footer__desc { font-size: 14.5px; color: var(--encre-2); max-width: 44ch; }

.atl-identite { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--trait); }
.atl-identite dl { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); margin: 0; }
@media (min-width: 700px)  { .atl-identite dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .atl-identite dl { grid-template-columns: repeat(3, 1fr); } }
.atl-identite div { background: var(--papier); padding: 15px 19px; }
.atl-identite dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 5px; }
.atl-identite dd { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--encre); }
.atl-mentions { margin-top: 28px; font-size: 12.5px; line-height: 1.75; color: var(--encre-3); max-width: 96ch; }
.atl-mentions strong { color: var(--encre-2); font-weight: 600; }

/* =========================================================================
   13. Prose des documents légaux
   ========================================================================= */

.atl-prose { max-width: 74ch; }
.atl-prose h1 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 34px; }
.atl-prose h2 { font-size: clamp(21px, 2.2vw, 29px); margin: 52px 0 16px; }
.atl-prose h3 { font-size: 18px; margin: 32px 0 12px; }
.atl-prose p, .atl-prose li { color: var(--encre-2); font-size: 16px; }
.atl-prose ul { padding-left: 20px; }
.atl-prose li { margin-bottom: 9px; }
.atl-prose table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; }
.atl-prose caption { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); padding-bottom: 12px; }
.atl-prose th, .atl-prose td { border: 1px solid var(--trait); padding: 12px 14px; text-align: left; vertical-align: top; color: var(--encre-2); }
.atl-prose th { background: var(--papier-3); color: var(--encre); font-weight: 600; }

.atl-bloc-entreprise { border: 1px solid var(--trait-fort); background: var(--papier-2); padding: 26px 30px; margin-bottom: 40px; }
.atl-bloc-entreprise dl { display: grid; gap: 14px 30px; margin: 0; }
@media (min-width: 720px) { .atl-bloc-entreprise dl { grid-template-columns: repeat(2, 1fr); } }
.atl-bloc-entreprise dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.atl-bloc-entreprise dd { margin: 4px 0 0; font-size: 14.5px; color: var(--encre); }

.atl-autres { margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--trait); }
.atl-autres h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 16px; }
.atl-autres ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* =========================================================================
   14. Caisse
   ========================================================================= */

.atl-caisse-case { margin: 16px 0 !important; }
.atl-caisse-case label { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); cursor: pointer; }
.atl-caisse-case input[type="checkbox"] { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.atl-caisse-note { margin: 24px 0 6px; padding: 13px 17px; background: var(--papier-3); border-left: 2px solid var(--accent); font-size: 14px; line-height: 1.6; }
.atl-boutique-page { max-width: none; }
.atl-boutique-page table { width: 100%; border-collapse: collapse; }
.atl-boutique-page th, .atl-boutique-page td { padding: 14px 12px; border-bottom: 1px solid var(--trait); text-align: left; }
.atl-boutique-page .button, .atl-boutique-page button[type="submit"] {
	background: var(--encre); color: var(--papier); border: 0;
	font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	padding: 15px 28px; cursor: pointer; text-decoration: none; display: inline-block;
}
.atl-boutique-page .checkout-button { background: var(--accent); }
.atl-boutique-page input, .atl-boutique-page select, .atl-boutique-page textarea {
	width: 100%; padding: 13px 15px; background: var(--papier-2);
	border: 1px solid var(--trait-fort); color: var(--encre); font: inherit; font-size: 15px;
}

/* =========================================================================
   15. Révélation
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].atl-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }